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

jQuery动态计算表格列总和教程

2026-03-10 14:45:46 0浏览收藏

本文深入讲解了如何利用 jQuery 实现表格数值列的动态实时求和——每当用户点击“ADD”按钮新增一行，系统便自动、准确地遍历所有带 class="table-number" 的单元格，安全解析并累加数值，即时刷新总计显示；文章不仅提供完整可运行代码，更直击常见陷阱（如误用 += 导致 NaN 或重复累加），强调重置计数器、严格类型转换、规范 DOM 操作与输入校验等关键实践，兼顾健壮性、可维护性与用户体验，是前端开发中处理动态表单统计需求的实用指南。

如何使用 jQuery 动态计算表格中数值列的总和

本文介绍如何在用户每次点击“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);">
  &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 /&gt;
  <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)"，更规范。
用户体验增强：添加输入校验与提示，提升健壮性。