正文：

在数据处理场景中，表格的分组合计是提升数据可读性的关键功能。例如，销售报表需按地区汇总金额，库存表需按品类统计数量。本文将探讨三种主流的实现方式，并提供可直接复用的代码方案。

方案一：原生JavaScript实现

核心思路是通过遍历表格行数据，动态插入合计行。假设有以下表格结构：

<table id="salesTable">
  <thead>
    <tr>
      <th>地区</th>
      <th>销售额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>华东</td>
      <td>12000</td>
    </tr>
    <!-- 更多数据行 -->
  </tbody>
</table>

实现分组合计的JavaScript代码如下：

function addGroupSummary() {
  const table = document.getElementById('salesTable');
  const rows = table.querySelectorAll('tbody tr');
  const groups = {};

  // 1. 按分组字段聚合数据
  rows.forEach(row => {
    const groupName = row.cells[0].textContent;
    const value = parseFloat(row.cells[1].textContent);
    groups[groupName] = (groups[groupName] || 0) + value;
  });

  // 2. 插入合计行
  Object.keys(groups).forEach(group => {
    const summaryRow = document.createElement('tr');
    summaryRow.innerHTML = `
      <td style="font-weight:bold">${group}合计</td>
      <td style="font-weight:bold">${groups[group]}</td>
    `;
    table.tBodies[0].appendChild(summaryRow);
  });
}

优点：零依赖，适合简单场景；缺点：需手动处理DOM更新逻辑。

方案二：使用DataTables插件

对于复杂表格，推荐使用DataTables插件。其内置的rowGroup扩展可轻松实现分组：

<script src="https://cdn.datatables.net/rowgroup/1.1.0/js/dataTables.rowGroup.min.js"></script>
<script>
  $(document).ready(function() {
    $('#salesTable').DataTable({
      rowGroup: {
        dataSrc: 0 // 按第一列分组
      },
      footerCallback: function(row, data) {
        // 添加页脚合计（需自行实现计算逻辑）
      }
    });
  });
</script>

优势：支持排序、分页等高级功能；注意：需引入jQuery和DataTables库。

方案三：Vue/React组件化方案

现代前端框架中，可封装可复用的表格组件。以Vue 3为例：

<template>
  <table>
    <tbody v-for="(group, name) in groupedData" :key="name">
      <tr v-for="item in group.items" :key="item.id">
        <td>{{ item.region }}</td>
        <td>{{ item.amount }}</td>
      </tr>
      <tr class="summary-row">
        <td colspan="2">{{ name }}总计：{{ group.total }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps(['data']);

const groupedData = computed(() => {
  return props.data.reduce((acc, item) => {
    if (!acc[item.region]) {
      acc[item.region] = { items: [], total: 0 };
    }
    acc[item.region].items.push(item);
    acc[item.region].total += item.amount;
    return acc;
  }, {});
});
</script>

最佳实践：
1. 大数据量时使用虚拟滚动优化性能
2. 分组字段建议预先排序以减少计算开销
3. 合计行样式需与普通行明显区分

总结对比

| 方案 | 适用场景 | 开发成本 | 扩展性 |
|---------------|-----------------------|----------|-------------|
| 原生JS | 简单静态表格 | 低 | 有限 |
| DataTables | 企业级复杂表格 | 中 | 优秀 |
| 框架组件 | 现代化Web应用 | 高 | 极佳 |

选择时需权衡项目需求与技术栈。若追求极致性能，可考虑Web Worker处理分组计算；若需服务端支持，可搭配SQL的GROUP BY语句提前聚合数据。