如何在动态 HTML 表格中按层级条件合并单元格：JavaScript 实现

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

本文介绍一种递归式 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）提升兼容性与性能，且能准确比对纯文本内容。

⚠️ 注意事项：

立即学习“Java免费学习笔记（深入）”；

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

该方案已通过题设案例验证：对 AAAA/BBB1/AAA2 等混合分组数据，严格遵循“列优先、块内合并”原则，生成符合预期的嵌套合并效果——既保持语义清晰，又具备良好扩展性。