JQuery сумма нескольких строк из нескольких раскрывающихся полей

Question

Я нашел несколько действительно хороших строк суммы, столбца суммы раскрывающихся примеров, но ничего в строке суммы и общей сумме выпадающих списков. Я не очень хорош в jQuery, но учусь.

У меня много строк выпадающих списков по дням недели, каждый из которых является рабочей сменой. Мне нужно составить ряд смен. Затем суммируйте столбец общего количества часов.

Я прочитал, что 'select' не похож на входные данные, поэтому большинство примеров строк суммы, которые я видел, не работали.

Мне нужен такой рабочий пример. Я буду использовать php для зацикливания строк, поэтому важно обращаться к строкам (по id? По классу?) Пожалейте и покажу новичку, как это делается ... спасибо всем.

Вот таблица:

<table >
    <thead>
        <tr>
            <th></th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thur</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>
            <th>Hours</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>r1</th>
            <td> <select>
        <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
        </select></td>
            <td> <select>
        <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
        </select></td>
          <td><select >
            <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
          </select></td>
            <td><select>
              <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
            </select></td>
            <td><select >
              <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
            </select></td>
            <td><select >
              <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
            </select></td>
            <td><select >
              <option value="8">9-5</option>
        <option value="9">9-6</option>
        <option value="10">9-7</option>
            </select></td>
            <td> 40</td>
        </tr>
        <tr>
            <th>r2</th>
            <td><select>
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
              </select>
            </td>
            <td><select>
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
              </select>
            </td>
            <td><select >
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
            </select></td>
            <td><select >
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
            </select></td>
            <td><select >
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
            </select></td>
            <td><select>
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
            </select></td>
            <td><select>
                <option value="8">9-5</option>
                <option value="9">9-6</option>
                <option value="10">9-7</option>
            </select></td>
          <td>40</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>s</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>80</td>
        </tr>
    </tfoot>
</table>

Answer 1

Если вам нужно запустить его сразу, для вашего случая есть пример кода:

$('table tbody tr').each(function(){
  var sum = 0;
  $('option:selected', this).attr('value', function(i,v){
    sum += parseInt(v);
  });

  $('td:last', this).text(sum)
})

Обновление - код с событием щелчка в реальном времени и пересчет всех и всех сумм

См. Пример работы здесь: http://jsfiddle.net/6HAPV/2

HoursSum = {
  table:    $('table'),
  row:      $('table tbody tr'),
  totalSum: $('table td:last'),

  init: function(){
    this.row.each(function(){
      HoursSum.calculate(this)
    });
    HoursSum.rebuildEvent();
    HoursSum.totalSumEvent();
  },

  rebuildEvent: function(){
    $('select', this.row).bind('change',function(){
      HoursSum.calculate($(this).parents('tr'));
    })
  },

  calculate: function(obj){
    var sum = 0;
    $('option:selected', obj).attr('value', function(i,v){
      sum += parseInt(v);
    });
    $('td:last', obj).text(sum);
    HoursSum.table.trigger('sumChanged', sum);
  },

  totalSumEvent: function(){
    HoursSum.table.bind('sumChanged', function(){
      v = 0;
      HoursSum.row.find('td:last').each(function(){
        v += parseInt($(this).text())
      })
      HoursSum.totalSum.text(v)
    });
  }
}

HoursSum.init()

Answer 2

Мое понимание прочитанного сейчас ужасно, я так устала, что понятия не имела, о чем ты просишь, и это моя вина, но я надеюсь, что это то, что ты хочешь.

РЕДАКТИРОВАТЬ: я не виделачто количество отработанных часов было в атрибуте имени, поэтому я рассчитывал отработанные часы на основе значения.

$(function(){

    $('select').change(function(){
        renderHours();
    });

    function renderHours() {

        var totalHours = 0;
        $('tbody').children('tr').each(function(){


            var rowHours = 0;
            $("option:selected", $(this)).each(function(){

                var str = $(this).val();
                totalHours += str;
                rowHours += str;
            });

            $('td:last', $(this)).html(rowHours);
        });
        $('td:last').html(totalHours);


    }
    renderHours();
});