如何在Javascript或JQuery中对非空元素的值求和

Question

我正在尝试使用name ='gross_val'对<td>个元素中的所有html进行总计。我有以下<td>元素：

<tr><td name="gross_val" align="right" title="gross_val1" ></td></tr>
<tr><td name="gross_val" align="right" title="gross_val2" ></td></tr>
<tr><td name="gross_val" align="right" title="gross_val3" ></td></tr>
<tr><td name="gross_val" align="right" title="gross_val4" ></td></tr>
<tr><td name="gross_val" align="right" title="gross_val5" ></td></tr>

所有这些<td>元素都已动态填充其中的值。其中一些<td>元素的总值位于<tr>内，其中一些尚未填充。我只想总结那些已填充总值的<td>个元素。然后在另一个<td>元素中显示该值。

我为此编写了以下JQuery和Javascript：

    function computeGrossValTotal() {
        var x = $("td[name='gross_val']");
        var gValues = [];
        $(x).each(function(index) {
            // this line takes up the raw html inside of that td element
            var valc = $(this).html();
            // this line strips all the currency and other characters and symbols
            // off the 'valc' variable and makes it in an integer format
            var val = Number(WC(valc));
            if (val) {
                gValues.push(val);
            }
        });
        // this line adds the values inside of gValues array
        sum = Number(gValues.reduce(add, 0));
        alert(sum);
    }
    $(document).on("keyup", function() {
        computeGrossValTotal();
    });
   function WC(x) { return Number(x.match(/(?:\d+|\.)/g).join("")); }
   function add(a, b) {return a + b;}

我面临的问题是 sum 不会发出警报，除非所有<td>元素都包含一些html。我不能从等式中删除空的td元素。有人可以指导我如何只对那些在其中有一定价值的<td>元素求和。

Answer 1

x.match（[[regex]]）将返回一个匹配数组，如果它与正则表达式不匹配，则为null。

当你有一个没有html的元素时，你和$（元素）.html（），你会得到一个空字符串，所以x.match（[[regex]]）将不匹配你的空字符串并返回null 。 然后你会尝试在null上做.join（＆＃34;＆＃34;），你会收到一个错误。

正如我在评论中发表的那样，您可以执行以下操作：

var valc = $(this).html() || "0";

或者，在你的情况下，我会修改WC函数以防止它尝试在null上执行.join并使其返回0（因为它不会影响你的添加）。 match返回null。

Answer 2

WC需要检查x.match()是否找到了某些内容，因此它不会在join上调用null。

function WC(x) {
    var nums = x.match(/(?:\d+|\.)/g);
    if (nums) {
        return Number(nums.join(''));
    } else {
        return null;
    }
}