jQuery sum点击按钮添加表中的所有TD值

Question

我有一个包含少量字段的表单，可以进行小的计算。填充所有下拉列表并单击添加按钮后，将显示特定任务的时间。同样如果您进行几次计算，数据将显示在表格中。并且时间列中的所有值将加在一起并显示在另一行中。我已经实现了。但它每次都会不断增加现有价值。

参考图片：

JS Fiddle

$(document).ready(function () {
    $('#calculate').click(function () {
        let tr = $("<tr/>").appendTo("#data tbody");
        $('#calc input, #calc select').each( function (index) {
            var input = $(this);
            $(tr).append('<td class=row-'+ $(input).attr("id") + '>' + $(input).val() + '</td>');
        });

        const componentFactor = $(tr).children(".row-component").text();
        const units = $(tr).children(".row-units").text();
        const total = componentFactor*units;

        $(tr).append('<td>' + total + '</td>');
        $("#calc")[0].reset();
        $("#total").html(sumColumn(5));
        function sumColumn(index) {
            var total = 0;
            $("td:nth-child(" + index + ")").each(function() {
                total += parseInt($(this).text(), 10) || 0;
            });  
            return total;
        }
    });
});

Answer 1

问题是您在sum函数中包含总行数。 .each正确地命中右侧索引处的每个TD元素，但它也包括第一行。

如果像这样修改sum函数，它就可以了。

function sumColumn(index) {
   var total = 0;
   $("td:nth-child(" + index + ")").each(function() {
       if(this.id !== 'total') {
          total += parseInt($(this).text(), 10) || 0;
       }                
    }); 
    return total;
}

Answer 2

相同的结论是，您在代码中添加了总数;您还可以使用以下选项：

function sumColumn(index) {
    var total = 0;

    $("tr> td:nth-child(" + index + ")").not(':first').each(function(i,item) {
       total += parseInt($(this).text(), 10) || 0;
    });  

    return total;
}

你可以在这里看到它： JSFiddle demo