Question

我正在尝试合并具有与其垂直邻居相同的值的单元格（为帮助请信贷user：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 ^th单元格，因为它不会计算已删除的单元格。因此，这样的引用可能是错误的（超出预期的另一列），甚至可能超出范围（这是您在示例中得到的）。

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

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>

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

1 个答案: