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

Question

I have searched a lot and couldn't find a solution, and since my code abilities are somewhat limited, I ask for help. 我进行了很多搜索，找不到解决方案，并且由于我的代码能力受到一定限制，因此我寻求帮助。

What I am trying to do is exactly what is found here: http://jsfiddle.net/unKDk/335/ 我正在尝试做的正是在这里找到的内容： 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();
});

But I would like to have input fields instead of pre-loaded numbers. 但是我想输入字段而不是预载数字。 To clarify, I found this code on the web, I am no the author of this code. 澄清一下，我在网上找到了此代码，我不是该代码的作者。

Thank you. 谢谢。

Answer 1

Please try with the below code snippet. 请尝试使用以下代码段。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function () {
            getTotal();

            $(".txtNumber").change(function () {
                getTotal();
            });
        });

        function getTotal() {
            $("#sum_table tr:not(:first,:last)  td:last-child").text(function () {
                var t = 0;
                $(this).prevAll().each(function () {
                    t += parseInt($(this).find('input').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) + ")").each(function () {
                    t += parseInt($(this).find('input').val(), 10) || 0;
                });
                return "Total: " + t;
            });
        }


    </script>
</head>
<body>
    <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 type="text" value="1" class="txtNumber" /></td>
            <td class="rowAA">
                <input type="text" value="2" class="txtNumber" /></td>
            <td class="rowBB">
                <input type="text" value="3" class="txtNumber" /></td>
            <td class="rowBB">
                <input type="text" value="4" class="txtNumber" /></td>
            <td class="totalRow"></td>
        </tr>
        <tr>
            <td>Row2</td>
            <td class="rowAA">
                <input type="text" value="1" class="txtNumber" /></td>
            <td class="rowAA">
                <input type="text" value="2" class="txtNumber" /></td>
            <td class="rowBB">
                <input type="text" value="3" class="txtNumber" /></td>
            <td class="rowBB">
                <input type="text" value="4" class="txtNumber" /></td>
            <td class="totalRow"></td>
        </tr>
        <tr>
            <td>Row3</td>
            <td class="rowAA">
                <input type="text" value="1" class="txtNumber" /></td>
            <td class="rowAA">
                <input type="text" value="5" class="txtNumber" /></td>
            <td class="rowBB">
                <input type="text" value="3" class="txtNumber" /></td>
            <td class="rowBB">
                <input type="text" value="4" class="txtNumber" /></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>
</body>
</html>

Answer 2

Not exactly 100% sure what you meant by having input fields instead of pre-loaded numbers. 并非完全100％知道使用输入字段而不是预载数字的含义。 Please see forked Fiddle, hope that's what you meant: http://jsfiddle.net/B9EWd/ 请查看分叉的小提琴，希望这就是您的意思： http : //jsfiddle.net/B9EWd/

HTML: 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: 使用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();

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

问题描述

2 个解决方案

解决方案1
0 2014-07-26 22:32:38

解决方案2
0 已采纳 2014-07-26 22:41:38

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

问题描述

2 个解决方案

解决方案1 0 2014-07-26 22:32:38

解决方案2 0 已采纳 2014-07-26 22:41:38

解决方案1
0 2014-07-26 22:32:38

解决方案2
0 已采纳 2014-07-26 22:41:38