2 fashion1993 fashion1993 于 2014.12.01 13:41 提问

如何用jquery去对表格的每一行每一列的数值进行求和

修改一个单元格的数值,表格最后一行,最后一列显示的加和也随之改变

2个回答

showbo
showbo   Ds   Rxr 2014.12.01 14:03

通过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>
showbo
showbo 回复fashion1993: .change改为.keyup
接近 3 年之前 回复
fashion1993
fashion1993 再打扰一下,如果我想在输入数值的同时就开始求和,该怎么实现
接近 3 年之前 回复
laiconglin
laiconglin   2014.12.01 16:44

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();
});
});
laiconglin
laiconglin 回复fashion1993: 能够用了就好。change是指有变化的时候触发时间,keyup是当有按键起来的时候触发,还有一个事件是keydown印象中,不过keydown用的比较少貌似。大家比较习惯用keyup来检测是否有新的输入。
接近 3 年之前 回复
fashion1993
fashion1993 用你方法,好像就可以实现,我试一下
接近 3 年之前 回复
fashion1993
fashion1993 如果我想在输入数值的同时就开始求和,该怎么实现,用change就不行了吧
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片