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

Will 发表于 Dev

将

我已经为此努力了一段时间。我有一个基于某些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>

这根本没有实现我想要的功能，但是我感觉我真的很接近！它试图计算下面的一个具有相同值的（第一列）单元格的数量，将此数字分配给最后一个相关单元格的行跨度，然后删除后续的单元格，然后循环返回以捕获其余单元格。我希望我的最终代码是这种代码的变体，所以有人可以告诉我我要去哪里了吗？非常感谢！

乔丹跑步

你确实很亲密！

一种简化的方法是保留对当前“标头”单元格的引用，即要增加其值rowspan的单元格。这样，您根本不必处理索引，从而产生了一个非常简单的算法：

每行
- 将firstCell设置为行的第一个单元格
- 如果这是第一行，或者firstCell的文本与headerCell的文本不同
  - 将headerCell设置为firstCell
- 除此以外
  - 将headerCell的rowSpan增加1
  - 删除firstCell

在JavaScript中，它看起来像这样：

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

let headerCell = null;

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。