本文介绍如何使用 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>
<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"><span class="check-qty"></span></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"><span class="check-qty"></span></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"><span class="check-qty"></span></td>
</tr>
</tbody>
</table>
<button type="submit" id="submitBtn" disabled>Submit</button>
</form>
<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>，提升可访问性。
该方案兼顾健壮性与可维护性，适用于各类基于表格的批量数据校验场景。
