Объединить соседние ячейки таблицы HTML с одинаковым значением, используя JS

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.Таким образом, вам совсем не нужно иметь дело с индексами, получая очень простой алгоритм:

• Для каждой строки

  • Set firstCell до первой ячейки строки

  • Если это первая строка ИЛИ firstCell отличается от текста headerCell

    • Установить headerCell на firstCell
  • В противном случае
    • Увеличить headerCell s 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>