动态HTML表格按层级条件合并单元格的JavaScript实现

本文详细讲解一种递归式 JavaScript 合并单元格方法，用于按列优先级（如前3列）智能合并表格行：仅当前一列已合并的前提下，才允许后续列合并相同值，从而精准实现多级分组与层级表格合并效果。

在动态生成的 HTML 表格中，按业务逻辑合并重复行是常见需求。然而，简单地对单列分别遍历合并——例如先合并第0列，再合并第1列——会引发一个经典问题：当第0列的值发生变化时，第1列即便内容相同，也不应跨过这个变化点进行合并。换言之，列合并存在严格的"层级依赖"关系：第1列的合并范围不能超出第0列已形成的合并块，第2列同理。这正是许多实现容易踩坑的关键所在，尤其在多层级表格合并场景中。

以下提供一个健壮、可复用的递归合并函数，支持灵活指定列范围与行范围，直接查看核心代码：

function mergeCells(table, startCol, endCol, startRow, endRow) {
  let cell = null;
  let cellStart = 0;

  // 辅助函数：对当前列中从 cellStart 到 r-1 的连续相同单元格执行合并
  function mergeCell(r) {
    if (cell && r > cellStart + 1) {
      // 若未达最后一列，先递归处理下一列在 [cellStart, r) 行区间内的合并
      if (startCol < endCol) {
        mergeCells(table, startCol + 1, endCol, cellStart, r);
      }
      // 设置 rowspan 并移除冗余单元格
      cell.rowSpan = r - cellStart;
      for (let s = cellStart + 1; s < r; s++) {
        table.rows[s].cells[startCol].remove();
      }
    }
  }

  // 主循环：逐行扫描当前列，识别连续相同值区间
  for (let r = startRow; r < endRow; r++) {
    const curCell = table.rows[r].cells[startCol];
    // 若为 null 或内容变更，触发上一段合并，并重置锚点
    if (!cell || cell.textContent !== curCell.textContent) {
      mergeCell(r);
      cell = curCell;
      cellStart = r;
    }
  }
  // 处理最后一段
  mergeCell(endRow);
}

// 使用示例：对 #myTable 的第0～2列（索引0,1,2）、第1行起（跳过表头）至末尾进行合并
const table = document.getElementById('myTable');
mergeCells(table, 0, 2, 1, table.rows.length);

✅ 核心设计要点解析：

• startCol 与 endCol 定义待合并的列区间（闭区间），startRow/endRow 定义行区间（左闭右开）；
• 递归调用 mergeCells(..., startCol + 1, ...) 确保：仅在当前列某连续段内，才对该段内所有行的下一列执行合并判断，实现按层级合并单元格；
• rowSpan 动态设置配合 remove() 方法，确保 DOM 结构正确，避免出现空白单元格或错位；
• 采用 textContent（而非 innerText）提升浏览器兼容性与执行性能，同时准确比对纯文本内容。

⚠️ 使用注意事项：

• 表格需具备明确结构（/ 可选，但 rows 集合必须包含所有目标行）；
• 合并操作仅作用于 ，不会修改 ；如需合并表头，请单独调用并调整 startRow 参数；
• 执行前请确认目标列存在（cells[startCol] 不为 undefined），建议添加空值校验；
• 合并后 CSS 样式（如边框、背景）可能需要配合 border-collapse: collapse 以消除缝隙。

该方案已通过实际案例验证：对 AAAA/BBB1/AAA2 等混合分组数据，严格遵循"列优先、块内合并"原则，生成符合预期的嵌套合并效果——既保持语义清晰，又具备良好的扩展性与复用性，是动态表格合并单元格的可靠解决方案。