基于现有HTML表格按ID生成汇总表格的实现难题

我来帮你搞定这个按ID分组累加数值并生成汇总表格的需求！你提到目前只能实现数值累加，但没法按ID创建对应行完成分组，下面这个方案不管ID范围（哪怕不是100递增也没关系）、条目数量多少，都能稳定工作：

核心思路 #

1. 提取原表格数据：遍历原表格的每一行，把ID和对应的Value值提取出来
2. 分组累加：用一个对象作为"字典"，Key是ID，Value是该ID对应的累加总和，遍历数据时判断ID是否已存在，存在就累加，不存在就初始化
3. 生成汇总表格：根据累加后的对象，动态创建汇总表格的HTML结构，插入到原表格下方

完整代码示例 #

<!-- 原表格 -->
<table id="originalTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>100</td>
      <td>3</td>
    </tr>
    <tr>
      <td>200</td>
      <td>2</td>
    </tr>
    <tr>
      <td>400</td>
      <td>7</td>
    </tr>
    <tr>
      <td>100</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

<!-- 汇总表格会插入到这里 -->
<div id="summaryContainer"></div>

<script>
// 1. 获取原表格数据
const originalTable = document.getElementById('originalTable');
const rows = originalTable.querySelectorAll('tbody tr');
const dataMap = {};

// 2. 遍历数据并分组累加
rows.forEach(row => {
  const id = row.cells[0].textContent.trim();
  const value = parseInt(row.cells[1].textContent.trim(), 10);
  
  if (dataMap[id]) {
    dataMap[id] += value;
  } else {
    dataMap[id] = value;
  }
});

// 3. 生成汇总表格HTML
let summaryHtml = `
<table id="summaryTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
`;

// 遍历累加后的对象，创建每一行
Object.entries(dataMap).forEach(([id, total]) => {
  summaryHtml += `
    <tr>
      <td>${id}</td>
      <td>${total}</td>
    </tr>
  `;
});

summaryHtml += `
  </tbody>
</table>
`;

// 插入到页面中
document.getElementById('summaryContainer').innerHTML = summaryHtml;
</script>

代码说明 #

• 数据提取：通过querySelectorAll获取原表格的所有数据行，然后逐个读取单元格的文本内容
• 分组累加：dataMap对象会自动帮我们管理每个ID的总和，不管ID是100、200还是其他数值，只要出现过就会被记录并累加
• 动态生成表格：用字符串拼接的方式生成汇总表格的HTML，最后插入到指定容器中，这样不管原表格有多少行，都能自动生成对应的汇总行

如果你是用其他框架（比如jQuery、Vue等），这个核心逻辑也可以直接适配，只需要调整获取数据和生成DOM的方式就行。

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