HTML代码:
<table border="1" cellspacing="0">
<thead>
<th></th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</thead>
<tbody>
<tr>
<td></td>
<td><input type="text" placeholder="--" onkeyup="total()"></td>
<td><input type="text" placeholder="--" onkeyup="total()"></td>
<td><input type="text" placeholder="--" onkeyup="total()"></td>
<td id="row1"></td>
</tr>
<tr>
<td></td>
<td><input type="text" placeholder="--" onkeyup="total()"></td>
<td><input type="text" placeholder="--" onkeyup="total()"></td>
<td><input type="text" placeholder="--" onkeyup="total()"></td>
<td></td>
</tr>
<tr>
<td>合计</td>
<td id="col1"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
JQuery代码:
function total(){
var colTotal = 0;
var rowTotal = 0;
// 计算列和
$('table tr:gt(0)').each(function(){
if(parseFloat($(this).find('td:eq(1) input[type="text"]').val())){
colTotal += parseFloat($(this).find('td:eq(1) input[type="text"]').val());
}
});
$('#col1').text(colTotal);
// 计算行和
$('table tr:eq(1) td input[type="text"]').each(function(){
if(parseFloat($(this).val())){
rowTotal += parseFloat($(this).val());
}
});
$('#row1').text(rowTotal);
}
想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » JQuery动态求和的方法
本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » JQuery动态求和的方法