本教程详解如何使用 jquery 实时计算表格各行“good”与“no good”输入值之和，与预设“total”值比对并以颜色标识校验结果，同时仅当所有行校验通过且总和一致时启用提交按钮。

本教程详解如何使用 jquery 实时计算表格各行“good”与“no good”输入值之和，与预设“total”值比对并以颜色标识校验结果，同时仅当所有行校验通过且总和一致时启用提交按钮。

在数据录入类表格应用中，常需对每行多个数值输入项（如合格数、不合格数）进行实时求和，并与该行预设的理论总量（如“Total”列）进行一致性校验。本方案提供一套健壮、可复用的 jQuery 实现逻辑，涵盖三重核心能力：逐行求和渲染、视觉化校验反馈、全局提交条件控制。

✅ 核心逻辑拆解

1. 逐行求和与实时渲染
   每次用户在任意 <input> 中输入（keyup 事件），触发 checkAndUpdateTable() 函数。该函数遍历每一行 <tr>，提取首列文本值（<code>td:eq(0)）作为期望总量 total；再遍历当前行内所有 <input>，累加其数值（Number(val) || 0 确保非数字输入不中断计算），结果写入该行最后一列（td:last），并根据 qty === total 动态设置文字颜色为绿色（通过）或红色（不通过）。

2. 提交按钮智能启停
   enableDIsableSubmit() 不再依赖模糊的 :contains(2) 匹配（易出错），而是精确计算所有行 Total 列的总和（finalTotal）与所有行 Check 列显示值的总和（finalCheck）。仅当二者严格相等 且 均不为零时，才启用提交按钮：

   $('#submitBtn').prop('disabled', !(finalTotal === finalCheck && finalTotal > 0));

   此设计避免了单行校验通过但整体失衡的误判，确保业务逻辑完整性。

3. 初始化与事件绑定
   使用 $(function(){ ... }) 确保 DOM 加载完成即执行一次 checkAndUpdateTable()，完成初始状态渲染；后续仅监听 keyup（比 input 更兼容旧版浏览器），兼顾性能与稳定性。

? 完整可运行代码示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Total	Good	No Good	Check
45
30
15

Submit
<script> $(function() { // 初始化校验 checkAndUpdateTable(); // 绑定输入事件（推荐使用 keyup，兼容性更佳） $('.calculation-table tbody tr input').on('keyup', checkAndUpdateTable); }); function checkAndUpdateTable() { $('.calculation-table tbody tr').each(function() { const $row = $(this); const total = parseInt($row.find('td:first').text(), 10) || 0; let qty = 0; $row.find('input').each(function() { qty += Number($(this).val()) || 0; }); // 渲染 Check 值并着色 $row.find('td:last').text(qty).css('color', qty === total ? 'green' : 'red'); }); enableDIsableSubmit(); } function enableDIsableSubmit() { let finalTotal = 0, finalCheck = 0; // 计算所有 Total 列总和 $('.calculation-table tbody tr').each(function() { finalTotal += parseInt($(this).find('td:first').text(), 10) || 0; }); // 计算所有 Check 列总和 $('.calculation-table tbody tr').each(function() { finalCheck += parseInt($(this).find('td:last').text(), 10) || 0; }); // 仅当总量匹配且非零时启用按钮 $('#submitBtn').prop('disabled', !(finalTotal === finalCheck && finalTotal > 0)); } </script>

⚠️ 注意事项与最佳实践

• 输入类型优化：将 <input type="text"> 改为 <input type="number" min="0"> 可原生限制非法输入，减少 JavaScript 校验负担。
• 空值鲁棒性：Number(val) || 0 和 parseInt(..., 10) || 0 确保空字符串、null 或非数字内容均被安全转换为 0，避免 NaN 传播。
• 性能考量：对于超大表格（>100 行），可考虑节流（throttle）keyup 事件，但本例中直接调用已足够高效。
• 可扩展性：若未来增加新列（如“Rework”），只需修改 $('input', $row) 选择器范围，无需重构主逻辑。

通过以上实现，您将获得一个响应迅速、逻辑清晰、易于维护的表格数值校验系统，完美支撑生产环境下的数据质量管控需求。