本文介绍如何使用 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>
<form>
<table class="calculation-table">
<thead>
<tr class="paysilp-table-border">
<th rowspan="2" style="width:15%;">Total</th>
<th rowspan="2" style="width:15%;" class="text-center">Good</th>
<th rowspan="2" style="width:15%;" class="text-center">No Good</th>
<th rowspan="2" style="width:15%;" class="text-center">Check</th>
</tr>
</thead>
<tbody class="paysilp-table-borders">
<tr>
<td>45</td>
<td><input type="text" name="quality1[]" value="20"></td>
<td><input type="text" name="quality2[]" value="25"></td>
<td class="text-center"></td>
</tr>
<tr>
<td>30</td>
<td><input type="text" name="quality1[]" value="20"></td>
<td><input type="text" name="quality2[]" value="10"></td>
<td class="text-center"></td>
</tr>
<tr>
<td>15</td>
<td><input type="text" name="quality1[]" value="15"></td>
<td><input type="text" name="quality2[]" value="0"></td>
<td class="text-center"></td>
</tr>
</tbody>
</table>
<button type="submit" id="submitBtn" disabled>Submit</button>
</form>
<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>关联，提升可访问性。
该方案兼顾功能完整性、代码可读性与实际工程健壮性，可直接集成至现有表单系统中。
