jQuery循环遍历表格含输入框单元格求和时重复计数问题咨询

问题原因 #

• 核心错误是jQuery方法误用：你写的row.add('td:has(:input)')中，add()方法的作用是把全局范围内所有匹配td:has(:input)的元素和当前row行元素合并为一个新的元素集合，并不是你想的「查找当前行下所有含输入框的td」。
• 遍历这个错误的集合时，第一个遍历到的元素是整个<tr>行，在<tr>上执行find(":input").val()时，jQuery默认只会返回匹配到的第一个输入框的取值，也就是第一个含输入框单元格的数值，后续如果集合里重复匹配到其他元素，就会重复统计这个值。
• 额外可优化点：原逻辑没有做空输入判断，空输入转数值会得到NaN，可能导致合计结果异常。

修正方案 #

把遍历的选择器改成用find()查找当前行下的目标td即可，修正后代码如下：

sumFunction = function() {
    // 后续替换为 var row = $(this).closest("tr"); 即可适配全表监听
    var row = $("#testerField").closest("tr");
    var lastCell = row.find("td:last");
    var total = 0;
    // 改add为find，仅查询当前行内的含输入框单元格
    row.find('td:has(:input)').each(function() {
        var value = $(this).find(":input").val();
        // 增加非空判断，避免空输入导致计算异常
        if (value && value > 0) {
            total += Number(value);
        }  
    });
    lastCell.html(total);
}

内容的提问来源于stack exchange，提问作者Joshua Averbuch