本文介绍如何使用 jquery 实时计算每行“good”和“no good”输入框的数值总和，与首列“total”值比对并动态着色；当所有行校验通过且总和一致时，自动启用提交按钮。
本文介绍如何使用 jquery 实时计算每行“good”和“no good”输入框的数值总和，与首列“total”值比对并动态着色；当所有行校验通过且总和一致时，自动启用提交按钮。
在数据录入类表格中，常需对每行多个输入项进行实时校验（如：Good + No Good === Total），并基于整体校验结果控制表单提交权限。以下是一个结构清晰、可维护性强的 jQuery 实现方案。
✅ 核心逻辑说明
-
逐行求和：遍历每行
<tr>，提取其所有 <code><input>值，累加为qty（自动过滤非数字输入）； -
行级校验与反馈：将
qty写入该行最后一列（<td>），若等于首列 <code>Total文本值，则设为绿色，否则红色； -
全局提交控制：不仅检查“每行是否匹配”，更要求所有行的 Total 总和 === 所有行 Check 值总和（即
∑Total === ∑Check），避免单行误填仍通过校验； -
事件绑定优化：使用
keyup替代input（兼容性更好），并在 DOM 加载后立即执行一次初始化校验。
? 完整可运行代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script> $(function() { // 初始化校验 checkAndUpdateTable(); // 绑定输入事件（推荐用 keyup，兼容 IE/旧浏览器） $('.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:eq(0)').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'); }); // 全局提交控制：仅当 ∑Total === ∑Check 时启用按钮 enableDIsableSubmit(); } function enableDIsableSubmit() { let sumTotal = 0; let sumCheck = 0; $('.calculation-table tbody tr').each(function() { sumTotal += parseInt($(this).find('td:eq(0)').text(), 10) || 0; sumCheck += parseInt($(this).find('td:last').text(), 10) || 0; }); const isValid = sumTotal !== 0 && sumCheck !== 0 && sumTotal === sumCheck; $('#submitBtn').prop('disabled', !isValid); } </script>
⚠️ 注意事项
-
HTML 结构一致性：确保每行
<tr> 中 <code>Total始终为第一列<td>，<code>Check为最后一列<td>（非 <code><span></span>），否则.find('td:last')可能失效； -
输入容错处理：
Number(val) || 0和parseInt(..., 10) || 0可安全处理空值、字母等非法输入； - 性能考量：当前方案对百行以内表格无压力；若数据量极大，可考虑防抖（debounce）优化事件触发频率；
-
无障碍与语义化：建议为输入框添加
aria-label，并用<label></label>关联，提升可访问性。
该方案兼顾功能完整性、代码可读性与实际工程健壮性，可直接集成至现有表单系统中。
