jQuery动态添加表格行并计算总和教程

本文详解了如何用 jQuery 实现动态添加表格行并精准实时计算总和的核心技巧，直击初学者常踩的 DOM 操作陷阱——如标签闭合缺失、错误使用 html() 导致求和失效、未校验 NaN 等问题，并给出经过实战验证的优化方案：先安全插入行、再遍历解析每个 `.table-number` 单元格的文本内容，结合 `parseInt()` 与 `isNaN()` 严格校验，确保数值累加稳定可靠；同时融入现代前端最佳实践，包括语义化 HTML 结构、`e.preventDefault()` 替代旧式 JavaScript 链接、`type="button"` 防误提交及基础样式增强可读性，让动态表格求和既健壮又易维护，是表单交互类应用不可或缺的实用指南。

本文介绍如何使用 jQuery 在向 HTML 表格动态追加数据行后，准确汇总所有带 .table-number 类的单元格数值，并将结果实时显示在指定总计单元格中。

本文介绍如何使用 jQuery 在向 HTML 表格动态追加数据行后，准确汇总所有带 `.table-number` 类的单元格数值，并将结果实时显示在指定总计单元格中。

在 Web 表单交互中，常需实现“输入 → 添加至表格 → 自动求和”的功能。原始代码存在多个关键问题：append() 中缺失 闭合标签；错误地在 DOM 插入时直接执行赋值运算（+=）；且试图用 $("td.table-number").html() 获取全部内容导致仅返回首个匹配项的 HTML 字符串，无法遍历求和。

正确做法是：先完成行插入，再统一遍历所有 .table-number 元素，安全解析数值并累加。以下是优化后的完整实现：

  
  




  

    

      
Letter
      
Number
    
  
  

    

      
A
      
5
    
  



  

    
Total:
    
5
  



  
  
  ADD

✅ 关键改进点说明：

• 使用 明确语义化结构，便于精准追加行；
• 采用 .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，启用严格模式增强健壮性。

通过以上实现，即可稳定、高效地完成动态表格构建与实时数值汇总，为数据录入类应用提供可靠基础能力。

到这里，我们也就讲完了《jQuery动态添加表格行并计算总和教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！