在列的表中添加数据

Question

我有下表允许一个人输入数据。我正在尝试做的是构建一个简单的函数，它将计算出每列的总数。

<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
            <td><input type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input type="text" class="output" value="0" /></td>
            <td><input type="text" class="output" value="0" /></td>
            <td><input type="text" class="output" value="0" /></td>
        </tr>
    </tbody>
</table>

到目前为止我已经实施的jQuery是：

var total = 0;
// for each table row first cell
$('table tbody tr td:nth-child(1)').each(function () {
    // add together the input values of each row
    total += parseInt($(this).find('input').val());
    // find the output for that column (note i think this is where the problem is)
    $(this).parents('tr').find('.output').val(total);
});

虽然不起作用。有人可以帮忙吗？非常感谢。

Answer 1

<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input data-field="col1" type="text" value="100" /></td>
            <td><input data-field="col2" type="text" value="100" /></td>
            <td><input data-field="col3" type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input data-field="col1" type="text" value="100" /></td>
            <td><input data-field="col2" type="text" value="100" /></td>
            <td><input data-field="col3" type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input data-field="col1" type="text" value="100" /></td>
            <td><input data-field="col1" type="text" value="100" /></td>
            <td><input data-field="col1" type="text" value="100" /></td>
        </tr>
        <tr>
            <td><input data-field="col1" type="text" class="output" value="0" /></td>
            <td><input data-field="col2" type="text" class="output" value="0" /></td>
            <td><input data-field="col3" type="text" class="output" value="0" /></td>
        </tr>
    </tbody>
</table>

jQuery：

var total = 0;
$('table input[data-field="col1"]:not(.output)').each(function () {
    // add together the input values of each row
    total += parseInt($(this).val());
    $(input[data-field="col1"].output).val(total);
});

为每一列重复此操作，更好的是，创建一个接收数据字段并为每个组调用它的函数。

Answer 2

var total = 0;
// for each table row first cell
$('table tbody tr td:first').each(function () {
    total += parseInt($(this).find('input').val());
    $(this).parents('tr').find('.output').val(total);
});

Answer 3

您可能也在寻找能够触发添加的内容：

HTML：

    <table>
        <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input class="col1 add" type="text" value="100" /></td>
                <td><input class="col2 add" type="text" value="100" /></td>
                <td><input class="col3 add" type="text" value="100" /></td>
            </tr>
            <tr>
                <td><input class="col1 add" type="text" value="100" /></td>
                <td><input class="col2 add" type="text" value="100" /></td>
                <td><input class="col3 add" type="text" value="100" /></td>
            </tr>
            <tr>
                <td><input class="col1 add" type="text" value="100" /></td>
                <td><input class="col2 add" type="text" value="100" /></td>
                <td><input class="col3 add" type="text" value="100" /></td>
            </tr>
            <tr>
                <td><input id="totCol1" type="text" class="output" value="0" /></td>
                <td><input id="totCol2" type="text" class="output" value="0" /></td>
                <td><input id="totCol3" type="text" class="output" value="0" /></td>
            </tr>
        </tbody>
    </table>

jQuery：

$(document).ready(function(){
    var total = 0;
    // for each table row first cell
    function calcTotals(){

        console.log("started");
        var total1 = 0;
        var total2 = 0;
        var total3 = 0;

        $('.add').each(function() {
            if($(this).hasClass("col1") == true){
                total1 += parseFloat($(this).val());
                console.log(total1);
            }
            if($(this).hasClass("col2") == true){
                total2 += parseFloat($(this).val());
                console.log(total2);
            }
            if($(this).hasClass("col3") == true){
                total3 += parseFloat($(this).val());
                console.log(total3);
            }
        });



        $("#totCol1").val(total1);
        $("#totCol2").val(total2);
        $("#totCol3").val(total3);
    }

    calcTotals();

    $("input").change(function(){
        calcTotals();
    });
});