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

Я боролся с этим некоторое время. У меня есть таблица, которая автоматически генерируется на основе некоторых данных 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>

Это не делает то, что я хочу, но я чувствую, что я действительно близок! Он пытается подсчитать количество ячеек (в первом столбце), для которых нижеприведенная ячейка имеет такое же значение, присваивая этот номер размеру строки последней соответствующей ячейки, а затем удаляя последующие ячейки, прежде чем вернуться к предыдущему циклу, чтобы перехватить остальные из них. Я бы хотел, чтобы мой окончательный код был вариацией этого, так что, может, кто-нибудь покажет мне, где я ошибаюсь, пожалуйста? Спасибо!

Источник

2 ответа

Решение

Вы были действительно довольно близко!

Чтобы немного упростить, нужно сохранить ссылку на текущую ячейку "заголовка", то есть ту, которую вы хотите увеличить. rowspan из. Таким образом, вам вообще не придется иметь дело с индексами, получая очень простой алгоритм:

  • Для каждого ряда

    • Установите firstCell на первую ячейку строки

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

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

Источник

Для тех, кто борется с той же проблемой. Я нашел решение, которое работает со всеми столбцами.

Идея в основном вращается вокруг перечисленного решения @Jordan.

Итак, если вы хотите объединить соседние ячейки с одинаковыми значениями для всех столбцов, попробуйте это решение.

Надеюсь это поможет :)

Источник
Другие вопросы по тегам