jQuery实现表格指定范围输入值为空或0时隐藏行的问题排查

数据老陈

2026-8-26

jQuery实现表格指定范围空行隐藏的问题修复

原代码存在的问题

元素选择错误：直接取td的所有子元素，没有限定为input节点，非input元素调用.val()会返回undefined，转整数后得到NaN，导致求和结果完全不可用
数值转换无兜底：输入为空、输入非数字内容时，parseInt会直接返回NaN，NaN参与加法运算的结果始终为NaN，无法匹配后续判断条件
判断逻辑写反：多个||连接的判断条件恒为真，会直接隐藏所有选中的行；且sum是数值类型，不需要和空字符串、字符串格式的"undefined"做类型不匹配的比较
DOM查找冗余：遍历的当前节点就是目标tr，不需要再调用closest向上查找tr节点
缺少动态适配：仅在代码初始执行时跑一次判断，后续input输入值变化时不会重新计算，也没有处理已隐藏行的重新显示逻辑

修正后可直接运行的代码

const calcAndHideEmptyRows = () => {
  // 选中从第5行开始的所有tr
  $(".produkttabelle_alt tr:nth-child(n+5)").each(function() {
    let total = 0;
    // 仅遍历当前行从第7列开始的td内的input输入框
    $(this).find("td:nth-child(n+7) input").each(function() {
      // 空值、非数字值统一按0计算，避免NaN污染求和结果
      total += parseInt($(this).val()) || 0;
    })
    // 总和为0则隐藏行，否则正常显示
    total === 0 ? $(this).hide() : $(this).show();
  })
}

// 页面DOM加载完成后首次执行计算
$(calcAndHideEmptyRows);
// 绑定输入事件，单元格内容变化时实时重新计算，适配动态输入场景
$(".produkttabelle_alt").on("input", "td:nth-child(n+7) input", calcAndHideEmptyRows);