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