本文介绍如何使用 jquery 对表格中每行的输入框进行实时数值累加，将结果与首列“total”值比对并动态着色，同时仅在所有行校验通过且总和一致时启用提交按钮。
本文介绍如何使用 jquery 对表格中每行的输入框进行实时数值累加，将结果与首列“total”值比对并动态着色，同时仅在所有行校验通过且总和一致时启用提交按钮。
在数据录入类表单中，常需确保每行输入值之和严格匹配预设总量（如“Good + No Good = Total”），并据此控制表单可提交性。以下是一个结构清晰、可直接复用的解决方案：
✅ 核心逻辑说明
-
逐行计算：遍历每行
<tr>，提取首列 <code>td:eq(0)的期望总量（total）； -
实时求和：对当前行内所有
<input>的值解析为数字后累加（NaN视为0）； -
视觉反馈：将计算结果填入末列
td:last，匹配时文字绿色，不匹配时红色； - 全局校验：汇总所有行的“期望总量”与“实际校验值”，仅当二者完全相等且非零时启用提交按钮。
? 完整实现代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script> $(function() { // 初始化校验 checkAndUpdateTable(); // 绑定输入事件（推荐用 'input' 而非 'keyup'，兼容粘贴/自动填充） $('.calculation-table tbody tr input').on('input', checkAndUpdateTable); }); function checkAndUpdateTable() { $('.calculation-table tbody tr').each(function() { const $row = $(this); const expected = parseInt($row.find('td:eq(0)').text(), 10) || 0; let actual = 0; $row.find('input').each(function() { actual += Number($(this).val()) || 0; }); // 更新 Check 列并设置颜色 $row.find('td:last').text(actual).css('color', actual === expected ? 'green' : 'red'); }); enableDIsableSubmit(); } function enableDIsableSubmit() { let sumExpected = 0; let sumActual = 0; $('.calculation-table tbody tr').each(function() { sumExpected += parseInt($(this).find('td:eq(0)').text(), 10) || 0; sumActual += parseInt($(this).find('td:last').text(), 10) || 0; }); // 仅当总和一致且均不为 0 时启用按钮 $('#submitBtn').prop('disabled', sumExpected !== sumActual || sumExpected === 0); } </script>
⚠️ 注意事项与优化建议
-
事件选择：使用
'input'事件替代'keyup'，可捕获剪贴板粘贴、浏览器自动填充、语音输入等所有值变更场景； -
类型安全：始终使用
parseInt(val, 10)或Number(val)显式转换，并用|| 0防止NaN导致计算中断； -
DOM 查询效率：缓存
$row引用，避免重复调用$(this)； -
可扩展性：若列数增加（如新增“Rework”列），只需修改
$('input')选择器范围，无需重写主逻辑； -
无障碍支持：确保
<input>具备aria-label或关联<label></label>，提升可访问性。
该方案兼顾健壮性与可维护性，适用于各类基于表格的批量数据校验场景。
