本文介绍如何使用 jquery 在向 HTML 表格动态追加数据行后，准确汇总所有带 .table-number 类的单元格数值，并将结果实时显示在指定总计单元格中。
本文介绍如何使用 jquery 在向 html 表格动态追加数据行后，准确汇总所有带 `.table-number` 类的单元格数值，并将结果实时显示在指定总计单元格中。
在 Web 表单交互中，常需实现“输入 → 添加至表格 → 自动求和”的功能。原始代码存在多个关键问题：append() 中缺失 闭合标签；错误地在 dom 插入时直接执行赋值运算（+=）；且试图用 $(“td.table-number”).html() 获取全部内容导致仅返回首个匹配项的 HTML 字符串，无法遍历求和。
正确做法是：先完成行插入，再统一遍历所有 .table-number 元素，安全解析数值并累加。以下是优化后的完整实现：
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> table { margin: 1rem 0; border-collapse: collapse; } td, th { padding: 0.5rem; border: 1px solid #ccc; } </style> </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 id="data-form"> <input id="letter" name="letter" placeholder="Enter letter" required /> <input type="number" id="number" name="number" placeholder="Enter number" required min="0" step="1" /> <button type="button" id="add">ADD</button> </form> <script> $(document).ready(function() { $('#add').on('click', function(e) { e.preventDefault(); // 阻止表单默认提交行为 const letter = $('#letter').val().trim(); const number = $('#number').val().trim(); if (!letter || !number) return; // 空值校验 // 动态插入新行（确保标签闭合） $('#content-table tbody').append(` <tr> <td class="table-letter">${letter}</td> <td class="table-number">${number}</td> </tr> `); // 清空输入框 $('#letter, #number').val(''); // 计算所有 .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>✅ 关键改进点说明：
- 使用
明确语义化结构，便于精准追加行；- 采用 .each() 方法安全遍历每个 .table-number 元素，避免 html() 或 text() 的单值局限；
- 添加 parseInt(val, 10) 和 isNaN() 校验，防止非数字内容（如空格、字母）导致 NaN 污染计算；
- 使用 e.preventDefault() 替代 action=”javascript:void(0)”，更符合现代实践；
- 表单按钮设为 type=”button”，彻底避免意外提交；
- 新增 CSS 基础样式提升可读性。
? 注意事项：
- 若表格数据量极大（千行以上），建议改用维护独立数据数组 + 重绘机制，避免频繁 DOM 查询影响性能；
- 如需支持小数，将 parseInt() 替换为 parseFloat()，并注意精度处理；
- 生产环境推荐使用 const/let 替代 var，启用严格模式增强健壮性。
通过以上实现，即可稳定、高效地完成动态表格构建与实时数值汇总，为数据录入类应用提供可靠基础能力。