如何实现对所有HTML表格的列求和并显示在最后一行？

核心思路是把单表格的求和逻辑封装成独立函数，再遍历页面所有目标表格逐个调用，以下是完整的可复用实现方案：

完整代码示例 #

HTML（多表格示例） #

<!-- 示例表格1 -->
<table class="sum-table">
  <thead>
    <tr>
      <th>项目</th>
      <th class="sum-column">数量</th>
      <th class="sum-column">金额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品A</td>
      <td>10</td>
      <td>250</td>
    </tr>
    <tr>
      <td>商品B</td>
      <td>5</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

<!-- 示例表格2 -->
<table class="sum-table">
  <thead>
    <tr>
      <th>序号</th>
      <th class="sum-column">销量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2</td>
      <td>20</td>
    </tr>
    <tr>
      <td>3</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

CSS（样式统一控制） #

.sum-table {
  border-collapse: collapse;
  margin: 20px 0;
  width: 100%;
}
.sum-table th, .sum-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
.sum-table tfoot tr {
  font-weight: bold;
  background-color: #f5f5f5;
}

JavaScript（批量处理逻辑） #

// 封装单表格求和函数，传入单个表格元素即可处理
function calculateTableColumnSums(table) {
  const tbody = table.querySelector('tbody');
  if (!tbody) return; // 无tbody的表格直接跳过

  const rows = tbody.querySelectorAll('tr');
  if (rows.length === 0) return; // 无数据行的表格跳过

  // 获取需要求和的列索引（通过sum-column类标记）
  const headerCells = table.querySelectorAll('thead th');
  const sumColumnIndexes = [];
  headerCells.forEach((cell, index) => {
    if (cell.classList.contains('sum-column')) {
      sumColumnIndexes.push(index);
    }
  });

  // 初始化总和数组
  const sums = new Array(headerCells.length).fill(0);

  // 遍历数据行计算总和
  rows.forEach(row => {
    const cells = row.querySelectorAll('td');
    sumColumnIndexes.forEach(index => {
      const value = parseFloat(cells[index].textContent.trim());
      if (!isNaN(value)) {
        sums[index] += value;
      }
    });
  });

  // 创建合计行
  const tfoot = table.querySelector('tfoot') || document.createElement('tfoot');
  const totalRow = document.createElement('tr');
  totalRow.innerHTML = headerCells.map((_, index) => {
    if (sumColumnIndexes.includes(index)) {
      return `<td>${sums[index].toFixed(2)}</td>`; // 保留两位小数，可按需调整
    } else {
      return `<td>合计</td>`; // 非求和列显示文本，可自定义
    }
  }).join('');

  // 更新表格合计行
  tfoot.innerHTML = '';
  tfoot.appendChild(totalRow);
  table.appendChild(tfoot);
}

// 页面加载完成后批量处理所有目标表格
document.addEventListener('DOMContentLoaded', () => {
  // 可通过类名筛选需要处理的表格，也可直接用document.querySelectorAll('table')处理所有表格
  const tables = document.querySelectorAll('.sum-table');
  tables.forEach(table => {
    calculateTableColumnSums(table);
  });
});

关键设计说明 #

1. 逻辑复用：将单表格求和逻辑封装成独立函数，传入不同表格元素即可重复调用，避免代码冗余。
2. 灵活配置：通过给表头<th>添加sum-column类，自由指定哪些列需要求和，无需修改JS逻辑即可适配不同表格结构。
3. 边界处理：自动跳过无数据行、无tbody的表格，转换数值时判断有效性，避免NaN干扰求和结果。
4. 动态生成：自动创建/更新表格底部的合计行，样式通过CSS统一控制，保持页面风格一致。

内容的提问来源于stack exchange，提问作者arash