在一个TR中汇总TD

时间:2013-07-09 17:42:41

标签: javascript jquery html

如何在一个TR中对td输入的值求和?

<table>
    <tr class="here">
        <td><input type="text" class="one" value="2" /></td>
        <td><input type="text" class="two" value="4"  /></td>
        <td><input type="text" class="three" value="5"  /></td>
        <td><input type="text" class="four" value="3"  /></td>
        <td><input type="text" class="sum"  /></td>
        <td><input type="text" class="five" value="2"  /></td>
    </tr>
    <tr class="here">
        <td><input type="text" class="one" value="2" /></td>
        <td><input type="text" class="two" value="4"  /></td>
        <td><input type="text" class="three" value="5"  /></td>
        <td><input type="text" class="four" value="3"  /></td>
        <td><input type="text" class="sum"  /></td>
        <td><input type="text" class="five" value="2"  /></td>
    </tr>
    <tr class="here">
        <td><input type="text" class="one" value="2" /></td>
        <td><input type="text" class="two" value="6"  /></td>
        <td><input type="text" class="three" value="4"  /></td>
        <td><input type="text" class="four" value="2"  /></td>
        <td><input type="text" class="sum"  /></td>
        <td><input type="text" class="five" value="2"  /></td>
    </tr>
    <tr class="here">
        <td><input type="text" class="one" value="5" /></td>
        <td><input type="text" class="two" value="2"  /></td>
        <td><input type="text" class="three" value="3"  /></td>
        <td><input type="text" class="four" value="8"  /></td>
        <td><input type="text" class="sum"  /></td>
        <td><input type="text" class="five" value="4"  /></td>
    </tr>    
</table>

LIVE DEMO

我可以用函数.each来总结所有值,但是如何为每个tr而不是td做这个?

我想从输入中使用类TWO和类THREE以及类FOUR对值进行求和,并将其添加到同一TR中具有类SUM的输入中。

我的例子应该是:

2 4 5 3 **12** 2 // 4+5+3
2 4 5 3 **12** 2 // 4+5+3
2 6 4 2 **12** 2 // 6+4+2
5 2 3 8 **13** 4 // 2+3+8

2 个答案:

答案 0 :(得分:10)

您的代码应如下所示。

您需要使用相关的特定类迭代td并总结值。然后将该值分配给您所引用的输入。

$('tr.here').each(function(){
    var sum = 0;
    $('.two, .three, .four', this).each(function() {
        sum += parseFloat(this.value);
    });

    $('.sum', this).val(sum);
})

<强> Check Fiddle

答案 1 :(得分:1)

尝试以下代码

$('tr.here').each(function () {
    var sum = parseFloat($(this).find('.two').val()) + parseFloat($(this).find('.three').val()) + parseFloat($(this).find('.four').val());

    $(this).find('.sum').val(sum);
})

选中此Fiddle