本文详解如何使用 jQuery 动态向 HTML 表格添加带数字的行，并在每次添加后自动汇总所有 .table-number 单元格中的数值，实时更新总计显示，包含完整可运行代码与关键注意事项。

本文详解如何使用 jquery 动态向 html 表格添加带数字的行，并在每次添加后自动汇总所有 `.table-number` 单元格中的数值，实时更新总计显示，包含完整可运行代码与关键注意事项。

在 Web 表单交互中，常需实现“输入 → 添加到表格 → 实时汇总”的功能。原始代码存在多个关键问题：append() 中缺失 闭合标签、错误地在 DOM 插入过程中直接修改 .table-total、误用 += 赋值表达式于 .text() 内部，且未遍历全部已有数字单元格——导致求和逻辑失效。

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

以下为修复后的专业级实现方案，兼顾健壮性、可读性与兼容性：

✅ 正确实现步骤

1. 确保 HTML 结构完整：补全 和 闭合标签，避免 DOM 解析异常；
2. 追加新行时严格格式化：使用完整的 ... ... 字符串；
3. 独立执行求和逻辑：在新增行后，统一遍历所有 .table-number 元素，安全累加；
4. 增强数值容错：使用 parseInt(val, 10) 并对非数字值返回 0，防止 NaN 中断计算。

? 完整可运行代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery 表格数值求和</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<table id="content-table" border="1" style="margin-bottom: 1rem;">
  <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 border="1">
  <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 min="0" step="1" />
  <button id="add">ADD</button>
</form>

<script>
$(document).ready(function() {
  $('#add').on('click', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为

    const letter = $('#letter').val().trim();
    const numberInput = $('#number').val().trim();

    if (!letter || !numberInput) return; // 空值校验

    // ✅ 安全追加新行（注意闭合标签）
    $('#content-table tbody').append(`
      <tr>
        <td class="table-letter">${letter}</td>
        <td class="table-number">${numberInput}</td>
      </tr>
    `);

    // ✅ 重新计算所有 .table-number 的总和
    let total = 0;
    $('.table-number').each(function() {
      const val = $(this).text().trim();
      const num = parseInt(val, 10);
      if (!isNaN(num)) total += num;
    });

    // ✅ 更新总计单元格
    $('.table-total').text(total);

    // ✅ 可选：清空输入框提升体验
    $('#letter, #number').val('');
  });
});
</script>

</body>
</html>

⚠️ 关键注意事项

• DOM 位置精准性：建议将新行插入 内（而非整个 ），避免破坏表头结构；
  数值解析安全性：务必使用 parseInt(str, 10) 显式指定十进制，并检查 isNaN()，避免 "10px" 或空字符串导致 NaN；
  事件委托适用场景：若未来需支持「删除行+重算」，推荐改用事件委托（如 $(document).on('click', '.delete-btn', ...)）；
  性能提示：对于上千行数据，可缓存总和变量并在增/删时增量更新，而非每次都全量遍历。

  通过以上实现，你将获得一个稳定、可维护、符合现代前端实践的表格动态求和功能——无需刷新页面，点击即见结果。