本教程详解如何使用 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>
<form>
  <table class="calculation-table">
    <thead>
      <tr class="paysilp-table-border">
        <th>Total</th>
        <th class="text-center">Good</th>
        <th class="text-center">No Good</th>
        <th class="text-center">Check</th>
      </tr>
    </thead>
    <tbody class="paysilp-table-borders">
      <tr>
        <td>45</td>
        <td><input type="number" name="quality1[]" value="20" min="0"></td>
        <td><input type="number" name="quality2[]" value="25" min="0"></td>
        <td class="text-center"></td>
      </tr>
      <tr>
        <td>30</td>
        <td><input type="number" name="quality1[]" value="20" min="0"></td>
        <td><input type="number" name="quality2[]" value="10" min="0"></td>
        <td class="text-center"></td>
      </tr>
      <tr>
        <td>15</td>
        <td><input type="number" name="quality1[]" value="15" min="0"></td>
        <td><input type="number" name="quality2[]" value="0" min="0"></td>
        <td class="text-center"></td>
      </tr>
    </tbody>
  </table>
  <button type="submit" id="submitBtn" disabled>Submit</button>
</form>

<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) 选择器范围，无需重构主逻辑。

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