我不正常Hen久了
2014-12-01 05:41
采纳率: 50%
浏览 14.4k

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 通过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>
    
    点赞 评论
  • laiconglin 2014-12-01 08: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();
    });
    });
    
    点赞 评论

相关推荐 更多相似问题