如何对 HTML 表格列中的值求和答案

【问题标题】：How to sum values in an HTML table column如何对 HTML 表格列中的值求和
【发布时间】：2020-03-19 03:57:04
【问题描述】：

我已经检查了 SO 上所有可以想到的问题，但没有找到解决我问题的问题。我最接近的是this。

在我的 Django 应用程序中，我有一个动态表，其中包含价格、数量和金额（价格 * 数量）列以及其他字段。我希望得到“amount”列的总和。可以在运行时添加行，出于测试目的，我将默认行数保持为 3（inlineformset_factory 中的extra = 2）。

我正在使用以下 jquery 来计算“amount”列中的值：

$(document).ready(function() {
    mySum=0;
    $("#process").click(function() {
        $(".itemPriceClass").each(function() {
                mySum += parseFloat($('.itemPriceClass input').val());
            alert('The sum of item amount is: ' + mySum);
        });
    });
});

在哪里： “itemPriceClass”是Amount列中的<td>类。

“process”是按钮的id，用于获取要执行的功能。

但是，在执行时（表中默认的三行，只填写了第一行），我发现函数执行了三次（虽然最后两行没有任何数据）最后的总数正好是第一行金额单元格值的三倍。

我尝试按照建议的here（如下所示）在线构建函数，但“value”变量在查询时返回“空白”，因此无法通过此路线。

var sum = 0;
// iterate through each td based on class and add the values
$(".price").each(function() {

    var value = $(this).text();
    // add only if the value is number
    if(!isNaN(value) && value.length != 0) {
        sum += parseFloat(value);
    }
});

我试图停止函数循环 3 次（类似于当单元格值为 0 时退出循环），但无法实现它。

所以我的问题是：

为什么我的函数会循环三次（即行数），从而将第一行输入的单元格值相加？

【问题讨论】：

可能是因为 mySum += parseFloat($('.itemPriceClass input').val()); - 它为每一行提供 3 个 input。写成mySum += parseFloat($(this).find('input').val());

标签： jquery django

【解决方案1】：

您的代码的问题是您正在循环遍历类元素，并且仍然使用初始选择器来计算总和。这意味着内部选择器将选择“itemPriceClass”的后代的所有输入。为了克服这个问题，改变

mySum += parseFloat($('.itemPriceClass input').val());

到

mySum += parseFloat($(this).find('input').val());

这样只有当前循环的行的后代输入才会被添加到总和中。

【讨论】：

【解决方案2】：

您的 jquery 代码中有几个小错误：

$(document).ready(function() {
    $("#process").click(function() {
        // Init variable when you press `process` button - will not sum over multiple clicks
        let mySum=0;
        // Loop over inputs directly.
        $(".itemPriceClass input").each(function() {
                mySum += parseFloat($(this).val());
        });
        // Alert at the end of the function, after all loops are done.
        alert('The sum of item amount is: ' + mySum);
    });
});

【讨论】：