本文介绍一种递归式单元格合并方案，支持按列优先级（如第1列→第2列→第3列）进行条件化 rowspan 合并：仅当前列值相同且所有前置列在对应行区间内均已合并时，才执行合并，从而精准实现分组嵌套式表格结构。
本文介绍一种递归式单元格合并方案，支持按列优先级（如第1列→第2列→第3列）进行条件化 rowspan 合并：仅当前列值相同且所有前置列在对应行区间内均已合并时，才执行合并，从而精准实现分组嵌套式表格结构。
在动态生成的 HTML 表格中，简单按单列重复值合并 rowspan 往往导致逻辑错误——例如当第1列值变化时，第2列即使内容相同也不应跨组合并。标准的“逐列独立合并”方法（如先合并第0列、再第1列）会破坏数据层级关系，造成视觉与语义错位。
正确的做法是采用层级依赖合并策略：第 n 列的合并必须基于前 n−1 列已在同一行区间内完成合并的前提。这本质上是一个递归划分问题：先确定第0列可合并的连续行块（如行1–2、行3–4），再对每个块内部递归处理第1列，依此类推。
以下是经过验证的生产级解决方案：
function mergeCells(table, startCol, endCol, startRow, endRow) {
let cell = null;
let cellStart = 0;
// 辅助函数：对当前列中从 cellStart 到 r-1 的连续相同值执行合并
function mergeCell(r) {
if (cell && r > cellStart + 1) {
// 若未达最后一列，递归处理下一列（限定在当前行区间内）
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];
if (!cell || curCell.textContent !== cell.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);✅ 关键设计亮点：
立即学习“Java免费学习笔记（深入）”；
- startRow/endRow 参数确保子递归严格作用于父级已划分的行区间，杜绝跨组干扰；
- textContent 替代 innerText 提升兼容性与空格鲁棒性；
- 合并后自动移除冗余 <td>，避免 DOM 结构污染；
- 支持任意列范围（startCol 到 endCol），灵活适配不同表结构。
⚠️ 注意事项：
- 表格必须有明确的 <thead>/<tbody> 结构或至少确保 startRow 跳过表头行（如示例中设为 1）；
- 所有目标列在每行中必须存在（即无 colspan 或缺失 <td>），否则 cells[startCol] 可能为 undefined；
- 若需支持空值（null/''）合并，请将判断逻辑改为 curCell.textContent.trim() === cell?.textContent.trim()；
- 合并后若需绑定事件或修改样式，建议在 mergeCells 调用后统一操作，因被移除的单元格将不再响应事件。
该方案已在 Chrome/Firefox/Safari 中验证通过，适用于后台导出表格、报表系统及管理后台等场景，兼顾性能与语义准确性。
