Jquery对多行多个下拉字段求和
Jquery对多行多个下拉字段求和
提问于 2011-10-15 14:04:38
我发现了一些非常好的sum行，sum列的下拉示例，但没有关于sum行和总计的下拉示例。我不太擅长jQuery，但我在学习。
我一周中有很多行的下拉列表，每行都是一个班次。我需要计算班次的总和。然后对总小时数列求和。
我读到'select‘不像一个输入，所以我看到的大多数和行示例都不起作用。
我需要一个这样的工作示例。我将使用php来循环行，因此对行进行寻址很重要(通过id？按类？)有同情心，并向一个新手展示它的done...thanks一切。
下面是表格：
<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>回答 2
Stack Overflow用户
回答已采纳
发布于 2011-10-15 14:39:41
如果您需要立即运行它，这里有一个适用于您的情况的代码示例：
$('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()Stack Overflow用户
发布于 2011-10-15 14:45:45
我现在的阅读理解很糟糕，我太累了，我不知道你要的是什么，这是我的错，但我希望这是你想要的。
编辑:我没有看到工作小时数在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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7776132
复制相关文章
相似问题
腾讯云开发者
