如何使用 JavaScript 按层级条件合并 HTML 表格的多列单元格-html教程-PHP中文网

如何使用 JavaScript 按层级条件合并 HTML 表格的多列单元格

本文介绍一种递归式单元格合并方案，支持按列优先级（如第1列→第2列→第3列）进行条件化 rowspan 合并：仅当前列值相同且所有前置列在对应行区间内均已合并时，才执行合并，从而精准实现分组嵌套式表格结构。

本文介绍一种递归式单元格合并方案，支持按列优先级（如第1列→第2列→第3列）进行条件化 rowspan 合并：仅当前列值相同且所有前置列在对应行区间内均已合并时，才执行合并，从而精准实现分组嵌套式表格结构。

在动态生成的 HTML 表格中，简单按单列重复值合并 rowspan 往往导致逻辑错误——例如当第1列值变化时，第2列即使内容相同也不应跨组合并。标准的“逐列独立合并”方法（如先合并第0列、再第1列）会破坏数据层级关系，造成视觉与语义错位。

正确的做法是采用层级依赖合并策略：第 n 列的合并必须基于前 n−1 列已在同一行区间内完成合并的前提。这本质上是一个递归划分问题：先确定第0列可合并的连续行块（如行1–2、行3–4），再对每个块内部递归处理第1列，依此类推。

以下是经过验证的生产级解决方案：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

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 <p>✅ <strong>关键设计亮点</strong>：  </p>

startRow/endRow 参数确保子递归严格作用于父级已划分的行区间，杜绝跨组干扰；
textContent 替代 innerText 提升兼容性与空格鲁棒性；
合并后自动移除冗余，避免 DOM 结构污染；
支持任意列范围（startCol 到 endCol），灵活适配不同表结构。

⚠️ 注意事项：

表格必须有明确的 / 结构或至少确保 startRow 跳过表头行（如示例中设为 1）；
所有目标列在每行中必须存在（即无 colspan 或缺失），否则 cells[startCol] 可能为 undefined；
若需支持空值（null/''）合并，请将判断逻辑改为 curCell.textContent.trim() === cell?.textContent.trim()；
合并后若需绑定事件或修改样式，建议在 mergeCells 调用后统一操作，因被移除的单元格将不再响应事件。

该方案已在 Chrome/Firefox/Safari 中验证通过，适用于后台导出表格、报表系统及管理后台等场景，兼顾性能与语义准确性。