使用JS合并具有相同值的相邻HTML表格单元格

Question

我一直在努力解决这个问题。我有一个基于一些 JSON 数据自动生成的表，这些数据可能会有所不同。我想合并第一列中具有相同值的相邻单元格，例如此表中的“鱼”和“鸟”：

<table>

  <tr>

    <td>fish</td>

    <td>salmon</td>

  </tr>

  <tr>

    <td>fish</td>

    <td>cod</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>

理想情况下，我不想使用任何库，只想使用纯 JS。

这就是我希望它的样子：

table, tr, td {

  border: solid 1px black;

}

<table>

  <tr>

    <td rowspan="3">fish</td>

    <td>salmon</td>

  </tr>

  <tr>

    <td>cod</td>

  </tr>

  <tr>

    <td>plaice</td>

  </tr>

  <tr>

    <td rowspan="2">bird</td>

    <td>robin</td>

  </tr>

  <tr>

    <td>crow</td>

  </tr>

</table>

我一直在寻找不同的方法来识别不同的值及其频率，然后将行跨度更改为正确的数字，然后删除其他单元格，但这些都在不同的用例中崩溃了。

这是我到目前为止：

let table = document.querySelector('table');

let rowCount = 1;

for (let i = 0; i < (table.rows.length - 1); i++) {

  if (table.rows[i].cells[0].innerHTML === table.rows[i + 1].cells[0].innerHTML) {

    rowCount++;

  } else if (rowCount !== 1) {

    table.rows[i].cells[0].setAttribute('rowspan', rowCount);

    for (let j = (i - rowCount + 1); j < rowCount; j++) {

      table.rows[j].cells[0].remove();

    };

    rowCount = 1;

  };

};

table, tr, td {

  border: solid 1px black;

}

<table>

  <tr>

    <td>fish</td>

    <td>salmon</td>

  </tr>

  <tr>

    <td>fish</td>

    <td>cod</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

你确实很接近！一种简化相当多的方法是保留对当前“标题”单元格的引用，即您想要增加的单元格rowspan。这样你根本不需要处理索引，产生一个非常简单的算法：对于每一行将headerCell的rowSpan增加 1删除firstCell将headerCell设置为firstCell将firstCell设置为行的第一个单元格如果这是第一行或firstCell的文本与headerCell的文本不同除此以外在 JavaScript 中，它看起来像这样：const table = document.querySelector('table');let headerCell = null;for (let row of table.rows) {&nbsp; const firstCell = row.cells[0];&nbsp;&nbsp;&nbsp; if (headerCell === null || firstCell.innerText !== headerCell.innerText) {&nbsp; &nbsp; headerCell = firstCell;&nbsp; } else {&nbsp; &nbsp; headerCell.rowSpan++;&nbsp; &nbsp; firstCell.remove();&nbsp; }}table, tr, td {&nbsp; border: solid 1px black;}<table>&nbsp; <tr>&nbsp; &nbsp; <td>fish</td>&nbsp; &nbsp; <td>salmon</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>fish</td>&nbsp; &nbsp; <td>cod</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>fish</td>&nbsp; &nbsp; <td>plaice</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>bird</td>&nbsp; &nbsp; <td>robin</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>bird</td>&nbsp; &nbsp; <td>crow</td>&nbsp; </tr></table>