动态表格求和问题：无法获取行总计值的技术求助

我来帮你排查并解决这个问题～你遇到的核心问题应该是动态添加的行没被正确统计，或者计算过程中出现无效值导致总和异常，咱们一步步来修复：

问题分析与解决方案 #

1. 选择器未覆盖动态行

你当前用的#item_table > tr > td:last-child是直接子元素选择器，而浏览器会自动给表格补全<tbody>标签（哪怕你没手动写），这时候表格的行其实是嵌套在<tbody>里的，原选择器只能拿到表格外的tr，根本选不到tbody里的动态行。

修改选择器为：

var td = document.querySelectorAll('#item_table tbody tr > td:last-child');

2. 处理非数字值导致的NaN

如果某行的总计列是空值或者非有效数字，parseInt会返回NaN，这会让整个总和直接变成NaN。咱们给parseInt加个默认值兜底：

return a + (parseInt(b.innerText) || 0);

3. 动态添加行后主动触发计算

你点击.add按钮新增行后，必须手动调用calc()函数，否则新行的总计值不会被纳入总和统计。修改你的点击事件：

$(document).on('click', '.add', function(){
    var html = '';
    html += '<tr>...'; // 这里保留你原本的行结构代码
    $('#item_table tbody').append(html); // 确保新行插入到tbody内
    calc(); // 新增这一行，添加完行立即重新计算总和
});

完整修正后的calc函数 #

function calc() {
    // 选中tbody内所有行的最后一列（包括动态添加的行）
    var td = document.querySelectorAll('#item_table tbody tr > td:last-child');
    // 累加时处理非数字值，避免出现NaN
    var stotal = [].reduce.call(td, function(a, b) {
        return a + (parseInt(b.innerText) || 0);
    }, 0);
    document.getElementById('sub_total').innerText = stotal;
}

内容的提问来源于stack exchange，提问作者Chris Campbell