登录
首页 >  文章 >  前端

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

时间：2026-03-10 14:45:46 118浏览 收藏

本文深入讲解了如何利用 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)"，更规范。
  • 用户体验增强：添加输入校验与提示，提升健壮性。

⚠️ 注意：若表格数据量极大（如千行以上），可考虑将总和状态缓存于变量中，仅增量更新（total += newNumber），但需同步管理删除/编辑逻辑。本例以清晰性与通用性优先，适用于绝大多数中小型表单场景。

终于介绍完啦！小伙伴们，这篇关于《jQuery动态计算表格列总和教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>