计算一列的总和 - jQuery？答案

【问题标题】：Calculate sum of one column - jQuery?计算一列的总和 - jQuery？
【发布时间】：2014-07-29 01:06:31
【问题描述】：

我想计算表格中特定列的值的总和。

表格如下所示：

<table>
    <tbody>
        <tr>
            <td>Old cost</td>

            <td class="oldCost">9 990,-</td>
        </tr>

        <tr class="discount">
            <td>Service - 2</td>

            <td>2 000,-</td>
        </tr>

        <tr class="template">
            <td>Theme - 3</td>

            <td>0,-</td>
        </tr>
            <tr class="result">

            </tr>
    </tbody>
</table>

问题是值是这样的 (X XXX,-) 所以我需要修剪（或分解？）它到一个正常的数字，然后创建所有的总和数字并显示在<tr class="result>

我尝试了很多方法，但我得到的唯一结果是显示 NaN 而不是总和。它不包含修剪功能，因为我只是没有找到合适的功能。

$("table").change(function(){
        var theTotal = 0;
        $("td:nth-child(2)").each(function () {

            theTotal += parseInt($(this).val());
            $(".result").text(theTotal);
        });
    });

【问题讨论】：

这个数字是什么意思？ 9 990 表示9990?
$(this).val() 应该是 $(this).text().split(',')[0].replace(/ /g,'') 。 $(".result") 也应该放在.each 之外
@KingKing 是的，这就是我们用我们的语言写价格的方式。感谢您的回答！

标签： jquery html sum

【解决方案1】：

由于您在代码中使用parseInt，我假设您希望所有价格都是整数值，并且始终以字符串“,-”结尾。如果我的假设是正确的，那么下面的代码应该可以工作：

$("table").change(function(){
    var theTotal = 0;
    $("td:nth-child(2)").each(function () {
        var val = $(this).text().replace(" ", "").replace(",-", "");
        theTotal += parseInt(val);
    });
    $(".result").html('<td colspan="2">' + theTotal + ',- </td>');
});

代码从整数部分删除空格，并删除“空小数”标记。见the replace function reference。

如果我的假设是错误的，即价格可以是浮点值，您可以删除破折号并将逗号替换为点，然后使用parseFloat。

【讨论】：

请注意，这会创建非法的 html - 一个被“tr”标签包围的文本节点，没有“td”。最后一行应该有 tds 并且添加功能应该包括检查您是否不在每个加法的最后一个 tr 中。也没有原生的 jQuery 函数来检查 HTML 的变化，函数“change”通常只会检测输入值的变化。见这里：http://stackoverflow.com/questions/12386058/html-table-onchange.
@nzn 很好，我编辑了我的答案。我使用了 2 列 td，因此它与第 n 个子访问器不匹配。我同意 change 事件，也注意到了它，但我猜 OP 在其代码中的某个位置手动触发它。

【解决方案2】：

您不应该将“val”用于“td”的内容，“change”也不会在桌面上起作用。您必须创建一个函数并让它在任何 javascript 更改 tds 中的值时触发，就像这样（这将删除所有不是数字或小数点的字符）：

tablechange = function(){
    var theTotal = 0;
    $("tr:not(:last-child) td:nth-child(2)").each(function () {
        theTotal += parseFloat($(this).html().replace(/[^0-9.]/g,''));
    });
    $(".result").text(theTotal);
};
tablechange();

【讨论】：

你不知道如何在结果后面插入一个特定的字符串吗？ $('.result').text(theTotal).after(',-'); 不适合我。
您可以只使用 '+' 运算符来附加字符串，这样您就可以使用 $(".result").text(theTotal+',-');
正如我在前面的评论中指出的那样，你应该在最后一行添加 td 以使其成为合法的 HTML。

【解决方案3】：

您希望$(this).html，而不是$(this).val 来获取每个表格单元格内的文本。然后用substr修剪逗号后的所有内容并用replace折叠空格，然后您可以将数字相加：

var value;
var theTotal = 0;
$("td:nth-child(2)").each(function () {
    value = $(this).html();
    value = value.substr(0, value.indexOf(','));
    value = value.replace(' ', '');
    theTotal += parseInt(value);
    $(".result").text('Total: ' + theTotal);
});

这是jsFiddle

【讨论】：