本文介绍如何在用户每次点击“add”按钮向表格添加新行后，自动汇总所有数值单元格（class="table-number"）并实时更新总计显示，涵盖正确 dom 操作、类型转换、遍历逻辑及常见错误规避。
本文介绍如何在用户每次点击“add”按钮向表格添加新行后，自动汇总所有数值单元格（class="table-number"）并实时更新总计显示，涵盖正确 dom 操作、类型转换、遍历逻辑及常见错误规避。
在 Web 表单交互中，动态维护表格数据的实时统计是一项高频需求。常见的误区是试图在追加行的同时直接修改已有单元格内容（如原代码中误用 += 修改 .html()），这不仅逻辑错误，还会导致重复累加或 NaN。正确的做法是：每次点击时，重新遍历当前所有目标单元格，安全解析数值并求和，再统一更新总计区域。
以下是优化后的完整实现：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<table id="content-table">
<thead>
<tr>
<th>Letter</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-letter">A</td>
<td class="table-number">5</td>
</tr>
</tbody>
</table>
<table>
<tr>
<td><strong>Total:</strong></td>
<td class="table-total">5</td>
</tr>
</table>
<form action="javascript:void(0);">
<input id="letter" name="letter" placeholder="Enter letter" required />
<input type="number" id="number" name="number" placeholder="Enter number" required />
<button id="add">ADD</button>
</form>
<script>
$(document).ready(function() {
$('#add').on('click', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
const letter = $('#letter').val().trim();
const numberStr = $('#number').val();
// 输入校验：确保数值有效
if (!letter || numberStr === '' || isNaN(numberStr)) {
alert('请输入有效的字母和数字！');
return;
}
// 安全追加新行（注意闭合标签）
$('#content-table tbody').append(`
<tr>
<td class="table-letter">${letter}</td>
<td class="table-number">${numberStr}</td>
</tr>
`);
// ✅ 正确计算总和：重置 total，遍历所有 .table-number 元素
let total = 0;
$('.table-number').each(function() {
const value = parseInt($(this).text(), 10);
if (!isNaN(value)) {
total += value;
}
});
// 更新总计显示
$('.table-total').text(total);
});
});
</script>
</body>
</html>关键要点说明：
- 避免 DOM 污染与重复计算：原代码中 $("td.table-total").text(... += ...) 是典型错误——它试图对文本内容做赋值运算，且未重置计数器，导致结果失真。
- 使用 .each() 替代手动 for 循环：更符合 jQuery 风格，语义清晰，自动处理空元素。
- 严格类型转换：parseInt(val, 10) 明确十进制解析，并配合 isNaN() 过滤非法值（如空字符串、非数字字符），防止 NaN 传播。
-
结构优化：为表格显式添加 和
，便于后续扩展（如排序、分页）；使用 e.preventDefault() 替代 action="javascript:void(0)"，更规范。
- 用户体验增强：添加输入校验与提示，提升健壮性。
⚠️ 注意：若表格数据量极大（如千行以上），可考虑将总和状态缓存于变量中，仅增量更新（total += newNumber），但需同步管理删除/编辑逻辑。本例以清晰性与通用性优先，适用于绝大多数中小型表单场景。
