本文介绍一种递归式 javascript 单元格合并方案，支持按列优先级（如第1列→第2列→第3列）进行条件化 rowspan 合并：仅当前列值相同且所有左侧列均已“对齐分组”时才合并，精准解决多级分组表头/数据行的视觉聚合需求。
本文介绍一种递归式 javascript 单元格合并方案，支持按列优先级（如第1列→第2列→第3列）进行条件化 rowspan 合并：仅当前列值相同且所有左侧列均已“对齐分组”时才合并，精准解决多级分组表头/数据行的视觉聚合需求。
在构建动态数据表格（如报表、后台管理列表）时，常需对重复数据进行视觉聚合——但简单按单列合并（如仅合并“Column 2”）会导致逻辑错位：当 Column 1 值不同时，Column 2 的相同值不应跨组合并。例如，BBB1 在 AAA1 和 AAA2 下各出现两次，应分别形成两个独立的 2 行合并块，而非错误地合并为 4 行。
上述需求本质是层级分组合并：第 0 列（最左）为最高优先级分组依据；第 1 列仅在第 0 列值相同时才可合并；第 2 列则需第 0 列与第 1 列均一致。这无法通过顺序独立调用 mergeCells(table, col) 实现，而需递归控制作用范围。
以下为推荐实现方案（已适配真实 DOM 结构）：
function mergeCells(table, startCol, endCol, startRow, endRow) {
let cell = null;
let cellStart = 0;
// 辅助函数：对 [cellStart, r) 区间内满足条件的单元格执行合并
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 列（即前3列），从第1行开始（跳过表头）进行合并
const table = document.getElementById('myTable');
if (table && table.rows.length > 1) {
mergeCells(table, 0, 2, 1, table.rows.length);
}✅ 关键设计说明：
立即学习“Java免费学习笔记（深入）”；
-
startRow = 1确保跳过<thead> 或首行表头（如需合并表头，传入 <code>0）； - 递归调用
mergeCells(..., startCol + 1, ...)严格限定在当前列相同值的连续行区间内处理下一列，保障层级约束； -
textContent比较避免因空格或 HTML 标签导致误判，如需忽略首尾空白，可改用curCell.textContent.trim()； - 合并后自动移除冗余
<td>，符合 HTML 表格规范（无需手动设 <code>display: none）。⚠️ 注意事项：
- 表格必须有完整
<tr> 结构，缺失 <code><td> 会导致 <code>cells[i]为undefined； - 若列数动态变化，建议将
endCol设为Math.min(2, table.rows[0]?.cells.length - 1)； - 合并操作不可逆，如需重绘，请先克隆表格或保留原始数据源；
- 对超大表格（>1000 行），建议添加
requestIdleCallback分片执行以防阻塞主线程。
此方案已验证于 Chrome/Firefox/Edge，兼容现代标准 DOM API，可直接集成至 Vue/React 项目（在
useEffect或mounted中调用）。通过精准控制合并边界，让动态表格真正具备“分组折叠”的专业报表表现力。 - 表格必须有完整
