Question

我正在使用jQuery。我想用jQuery计算特定表格单元格的求和。我的代码在这里：

 <table id="table">
<tr>
    <td>Item1</td>
     <td>Item2</td>
     <td>Item3</td>
     <td>Item4</td>
     <td>Item5</td>
     <td>Total</td>
</tr>

<tr>
    <td><input type="text" value="1"/></td>
    <td><input type="text" value="2"/></td>
    <td><input type="text" value="3"/></td>
    <td><input type="text" value="4"/></td>
    <td><input type="text" value="5"/></td>
     <td><input type="text" /></td>

</tr>
<tr>
    <td><input type="text" value="1"/></td>
    <td><input type="text" value="2"/></td>
    <td><input type="text" value="3"/></td>
    <td><input type="text" value="4"/></td>
    <td><input type="text" value="5"/></td>
     <td><input type="text" /></td>

</tr>

我希望第二列和第四列的总和显示在每行的最后一列中（即item3+item5，结果将显示在总列中）。如何使用jQuery使用for each循环来完成？

Answer 1

试试这个：

$(document).ready(function(){
    $("#table tr").each(function(){
        var a = $(this).find("td:eq(2)").find("input").val();
        var b = $(this).find("td:eq(4)").find("input").val();
        var c=parseInt(a)+parseInt(b);
        $(this).find("td:eq(5)").find("input").val(c);
    });
});

请参阅演示：Fiddle

Answer 2

您可以使用像

这样的变更处理程序

//register the change handler only for 3rd and 5th input elements
$('#table').find('td:nth-child(3) input, td:nth-child(5) input').change(function () {
    var $inputs = $(this).closest('tr').find('input');
    $inputs.last().val((+$inputs.eq(2).val() || 0) + (+$inputs.eq(4).val() || 0))
}).filter('td:nth-child(5) input').change(); //to initialize values

演示：Fiddle

使用jquery计算特定的表格单元格求和

2 个答案: