jQuery勾选表格行对应列求和无响应问题排查及解决

问题原因 #

• 核心错误是DOM节点遍历路径错误：你代码里的$(this).parent().next('td').find('.qta_scarichi')逻辑完全不对。复选框的父元素是第一列<td>，next('td')只能拿到第二列（Id列）的节点，而携带qta_scarichi类的是第六列节点，不可能在第二列里找到目标元素，最终拿到的是空值，计算结果为NaN，赋值给输入框自然没有效果。
• 次要潜在问题：如果你的模态框是动态渲染到页面的（即页面初始加载时表格还不存在），直接用$('.box').change()绑定事件会失效，因为绑定执行时.box类的元素还没有被插入DOM。
• 额外容错缺失：如果数值为空或者格式非法，parseFloat会返回NaN，会导致总和直接变成NaN。

修复方案 #

直接替换为以下代码即可，适配静态/动态加载的表格，且不需要依赖列的顺序，后续调整表格列也不会失效：

// 采用事件委托绑定，适配动态加载的模态框内容
$(document).on('change', '.box', function(){
    let total = 0;
    $('.box:checked').each(function(){
        // 先找到当前复选框所在的行，再在行内查找目标数值节点
        const qtaText = $(this).closest('tr').find('.qta_scarichi').text().trim();
        // 只累加合法数值
        const num = parseFloat(qtaText);
        if(!isNaN(num)){
            total += num;
        }
    });
    $('#qtà').val(total);
});

如果确认你的表格是页面初始加载就存在的（非动态插入），也可以用普通绑定方式，只修改遍历逻辑即可：

$('.box').change(function(){
    let total = 0;
    $('.box:checked').each(function(){
        const qtaText = $(this).closest('tr').find('.qta_scarichi').text().trim();
        const num = parseFloat(qtaText);
        if(!isNaN(num)){
            total += num;
        }
    });
    $('#qtà').val(total);
});

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