修改一个单元格的数值,表格最后一行,最后一列显示的加和也随之改变
通过dom关系获取tr后进行计算赋值
var ipts ;
$('#tb input').not('[readonly]').change(function () {
var sum = 0, v;
$('#tb tr').each(function () {
ipts = $(this).find('input');
v = (parseFloat(ipts.eq(0).val()) || 0) * (parseFloat(ipts.eq(1).val()) || 0)
ipts.eq(2).val(v);
sum += v;
});
$('#total').val(sum);
});
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<table id="tb">
<tr><th>单价</th><th>数量</th><th>小计</th></tr>
<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" readonly/></td></tr>
<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" readonly/></td></tr>
<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" readonly/></td></tr>
<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" readonly/></td></tr>
<tr><td>总计:</td><td><input type="text" id="total" readonly /></td></tr>
</table>
http://jsfiddle.net/hgeL44rz/2/
使用jQuery的话,很方便就可以得出了。
这里需要说明一下的是,使用each函数,以及bind函数来绑定change keyup这两个事件。
然后就可以得出你想要的,随着输入的数值的改变而改变了。
jsfiddle可以打开吗?
$(document).ready(function(){
function updateSum() {
var totalSum = 0;
$("td input.singleTotal").each(function() {
var p = $(this).parent().parent();
var sum = 0;
sum = parseInt(p.find("input:eq(0)").val()) * parseInt(p.find("input:eq(1)").val());
$(this).val(sum);
totalSum += sum;
});
$("td input#total").val(totalSum);
}
updateSum();
$("td input.input").bind("change keyup", function() {
updateSum();
});
});