当前位置：首页 > 文章列表 > 文章 > 前端 > jQuery动态添加表格行并计算总和教程

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

2026-02-22 20:09:54 0浏览收藏

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

jQuery 实现表格动态添加行并实时计算数字列总和

本文介绍如何使用 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">
  &lt;input id=&quot;letter&quot; name=&quot;letter&quot; placeholder=&quot;Enter letter&quot; required /&gt;
  &lt;input type=&quot;number&quot; id=&quot;number&quot; name=&quot;number&quot; placeholder=&quot;Enter number&quot; required min=&quot;0&quot; step=&quot;1&quot; /&gt;
  <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>

✅ 关键改进点说明：