本文介绍如何在用户每次点击“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），但需同步管理删除/编辑逻辑。本例以清晰性与通用性优先，适用于绝大多数中小型表单场景。