本文介绍一种递归式 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 等混合分组数据，严格遵循“列优先、块内合并”原则，生成符合预期的嵌套合并效果——既保持语义清晰，又具备良好扩展性。
