Question

我找到了一些非常好的总和行，下拉示例的总和列，但没有关于总和行和总计的下降。我不是很擅长jQuery而是学习。

我每周都会有很多行的下拉列表，每一行都是工作班次。我需要总计一排班次。然后总计总小时数列。

我读到'select'与输入不同，所以我看到的大多数总行示例都不起作用。

我需要一个像这样的工作示例。我将使用php循环行，所以重要的是解决行（按类？按类？）有可惜并向新手展示它是如何完成的...谢谢所有。

这是表格：

<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

我的阅读理解现在很糟糕我很累我不知道你要求什么，这是我的错，但我希望这就是你想要的。

编辑：我没有看到工作小时数是在name属性中，所以我根据值计算工作小时数。

$(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();
});

Jquery对多个下拉字段的多行求和

2 个答案: