如何使用JavaScript按条件合并动态表格前3列的行

需求：合并表格前3列的单元格，但第一列值不同时，第二列禁止合并。当前代码仅依据当前列文本重复合并，导致跨第一列不同值的错误合并（比如BBB1被错误合并），需要调整逻辑实现预期效果。

现有代码：

<script>
var table = document.getElementById('myTable');

function mergeCells(table, startIndex) {
  let headerCell = null;

  for (let row of table.rows) {
    const firstCell = row.cells[startIndex];

    if (headerCell === null || firstCell.innerText !== headerCell.innerText) {
      headerCell = firstCell;
    } else {
      headerCell.rowSpan++;
      firstCell.remove();
    }
  }
}
mergeCells(table, 2);
mergeCells(table, 1);
mergeCells(table, 0);
</script>

问题分析 #

当前mergeCells函数只判断当前列的文本是否一致，完全忽略了前置列的关联约束。比如处理第二列时，没有检查第一列的值是否和上一行相同，导致不同第一列值对应的第二列重复文本被错误合并。

修正方案 #

修改合并逻辑，处理某一列时，必须同时满足两个条件才合并：

1. 该列之前的所有列（从第0列到当前列的前一列）的单元格值，都和上一行对应列完全一致
2. 当前列的单元格值和上一行对应列一致

同时调整列的处理顺序，从左到右处理（先第0列，再第1、第2列），确保前置列的合并状态已确定。

修正后的代码：

<script>
var table = document.getElementById('myTable');

function mergeCells(table, colIndex) {
  let prevRow = null;
  let currentSpanCell = null;

  for (let row of table.rows) {
    let shouldMerge = true;
    // 检查当前列之前的所有列是否与上一行对应列值一致
    for (let i = 0; i < colIndex; i++) {
      if (!prevRow || row.cells[i].innerText !== prevRow.cells[i].innerText) {
        shouldMerge = false;
        break;
      }
    }
    // 检查当前列值是否与上一行一致
    if (!prevRow || row.cells[colIndex].innerText !== prevRow.cells[colIndex].innerText) {
      shouldMerge = false;
    }

    if (shouldMerge && currentSpanCell) {
      currentSpanCell.rowSpan++;
      row.cells[colIndex].remove();
    } else {
      currentSpanCell = row.cells[colIndex];
      prevRow = row;
    }
  }
}

// 按从左到右顺序处理列，保证前置列约束生效
mergeCells(table, 0);
mergeCells(table, 1);
mergeCells(table, 2);
</script>

逻辑说明 #

• 先处理第一列，此时没有前置列，仅根据自身文本重复合并
• 处理第二列时，先验证第一列的值是否和上一行相同，再看第二列文本是否重复，两者都满足才合并
• 处理第三列时，需要同时验证第一、第二列的值是否和上一行一致，再结合第三列文本判断是否合并
• 这样就能严格遵循“第一列值不同则第二列不合并”的规则，实现预期的表格合并效果

内容的提问来源于stack exchange，提问作者dustbunny