使用 JavaScript 动态合并表格列中的相邻单元格 - 修复错误

Question

我正在尝试合并与其垂直邻居具有相同值的单元格(感谢用户：179125为您提供帮助(。

如果您运行此代码段，您将看到这适用于第一列(即 3 个鱼细胞相互合并，2 个鸟细胞相互合并(，但不适用于第二列(两个鲑鱼单元格不合并(，此时发生类型错误。请注意，在没有 for 循环的情况下运行此命令并且仅针对单个列运行时不会发生错误。请有人阐明为什么这对我不起作用？非常感谢！

const table = document.querySelector('table');
for (let i = 0; i < table.rows[0].cells.length; i++) {
  let headerCell = null;
  for (let row of table.rows) {
    const firstCell = row.cells[i];
    if (headerCell === null || firstCell.innerText !== headerCell.innerText) {
      headerCell = firstCell;
    } else {
      headerCell.rowSpan++;
      firstCell.remove();
    };
  };
};

table {
  border-collapse: collapse;
}
table, tr, td {
  border: solid 1px black;
}

<table>
  <tr>
    <td>fish</td>
    <td>salmon</td>
  </tr>
  <tr>
    <td>fish</td>
    <td>salmon</td>
  </tr>
  <tr>
    <td>fish</td>
    <td>plaice</td>
  </tr>
  <tr>
    <td>bird</td>
    <td>robin</td>
  </tr>
  <tr>
    <td>bird</td>
    <td>crow</td>
  </tr>
</table>

Answer 1

问题是，当删除第一列中的单元格时，该行的单元格将比以前少，因此任何后续对row.cells[i]的引用都不会是原始^{的第 i 个}单元格，因为它不会计算已删除的单元格。因此，这样的引用可能是错误的(在预期的另一列中(，甚至超出范围(这是您在示例中得到的(。

您可以通过使外部循环从右列开始，返回到第一列来避免这种情况：

for (let i = table.rows[0].cells.length; i--;) {

const table = document.querySelector('table');
for (let i = table.rows[0].cells.length; i--;) {
  let headerCell = null;
  for (let row of table.rows) {
    const firstCell = row.cells[i];
    if (headerCell === null || firstCell.innerText !== headerCell.innerText) {
      headerCell = firstCell;
    } else {
      headerCell.rowSpan++;
      firstCell.remove();
    };
  };
};

table {
  border-collapse: collapse;
}
table, tr, td {
  border: solid 1px black;
}

<table>
  <tr>
    <td>fish</td>
    <td>salmon</td>
  </tr>
  <tr>
    <td>fish</td>
    <td>salmon</td>
  </tr>
  <tr>
    <td>fish</td>
    <td>plaice</td>
  </tr>
  <tr>
    <td>bird</td>
    <td>robin</td>
  </tr>
  <tr>
    <td>bird</td>
    <td>crow</td>
  </tr>
</table>