javascript - 如何对输入字段的行和列求和

Question

我查了很多资料都没有找到解决方案，由于我的代码能力有限，所以请求帮助。

我想做的正是在这里找到的:http://jsfiddle.net/unKDk/335/

$(function(){
    var $iTableTotals = $("#iTable .colTotal");
    var $eTableTotals = $("#eTable .colTotal");
    var $diffValues = $(".diffValue");
    $(".colTotal").on('change keyup', function() {
        $iTableTotals.each(function(i){
            var diff = Number($iTableTotals.eq(i).val()) - Number($eTableTotals.eq(i).val());
            $diffValues.eq(i).val(diff);
        });
    });
    $iTableTotals.eq(0).change();
});

但我想要输入字段而不是预加载的数字。澄清一下，我在网上找到了这段代码，我不是这段代码的作者。

谢谢。

Answer 1

不完全 100% 确定您所说的使用输入字段而不是预加载数字是什么意思。请参阅 forked Fiddle，希望这就是您的意思: http://jsfiddle.net/B9EWd/

HTML:

<table id="sum_table" width="300" border="1">
        <tr class="titlerow">
            <td></td>
            <td>Apple</td>
            <td>Orange</td>
            <td>Watermelon</td>
            <td>Strawberry</td>
            <td>Total By Row</td>
        </tr>
        <tr>
            <td> Row1</td>
            <td class="rowAA"><input value="7" /></td>
            <td class="rowAA"><input value="2" /></td>
            <td class="rowBB"><input value="3" /></td>
            <td class="rowBB"><input value="4" /></td>
            <td class="totalRow"></td>
        </tr>
        <tr>
            <td> Row2</td>
            <td class="rowAA"><input value="1" /></td>
            <td class="rowAA"><input value="2" /></td>
            <td class="rowBB"><input value="3" /></td>
            <td class="rowBB"><input value="4" /></td>
            <td class="totalRow"></td>
        </tr>
        <tr>
            <td>Row3</td>
            <td class="rowAA"><input value="1" /></td>
            <td class="rowAA"><input value="5" /></td>
            <td class="rowBB"><input value="3" /></td>
            <td class="rowBB"><input value="4" /></td>
            <td class="totalRow"></td>
        </tr>
        <tr class="totalColumn">
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
        </tr>
</table>

Javascript:

function updateTotals() {
    $("#sum_table tr:not(:first,:last)  td:last-child").text(function(){
        var t = 0;
        $(this).prevAll().find("input").each(function(){ 
            t += parseInt( $(this).val(), 10 ) || 0;
        });
        return t;
    });

    $("#sum_table tr:last td:not(:first,:last)").text(function(i){
        var t = 0;
        $(this).parent().prevAll().find("td:nth-child("+(i + 2)+") input").each(function(){
            t += parseInt( $(this).val(), 10 ) || 0;
        });
        return "Total: " + t;
    });
}

$( "input" ).change( updateTotals );
updateTotals();