Как реализовать механизм удаления строки если значения одинаковые?

Question

Как реализовать механизм удаления строки если значения одинаковые?

Рейтинг: 0Ответов: 1Опубликовано: 30.01.2023

Стоит задача скрыть все одинаковые параметры на странице сравнения товаров, как показано на картинке. Как это сделать? Допустим есть Apple два раза, а это значит, что нужно скрыть строку "производитель". Как это сделать на JS? Параметров около 30, и товаров может быть больше двух.

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 0

Если все данные уже получены, таблица сформирована, и не нужно обрабатывать что-то "на лету", то задача довольно проста:

const table = document.querySelector('table');
document.querySelector('input[type="checkbox"]').addEventListener('click', (ev) => {
  // Строки в таблице
  let rows = [...table.rows];
  // Если флажок "Скрыть одинаковые параметры" отмечен...
  if (ev.target.checked) {
    /* Перебор строк */
    rows.forEach((row) => {
      // Ячейки в текущей строке
      let cells = [...row.cells];
      // Если ячеек больше двух и текст каждой ячейки (начиная с третьей) совпадает с текстом второй ячейки...
      if (cells.length > 2 && cells.map((cell) => cell.textContent).includes(cells[1].textContent, 3)) {
        // Скрываем текущую строку
        row.style.display = 'none';
      }
    });
  } else {
    rows.forEach((row) => {
      row.style.display = '';
    });
  }
});

table{width:100%;border-collapse:collapse;border-spacing:0;font-size:2vw;font-family:sans-serif}table,td,th{border:1px solid #595959}td,th{padding:.5em}th{background:#e6e6e6;text-align:left}

<label><input type="checkbox"> Скрыть одинаковые параметры</label>
<table>
  <tr><th colspan="4">Общая информация</th></tr>
  <tr><td>Год выхода на рынок</td><td>2022</td><td>2021</td><td>2019</td></tr>
  <tr><td>Производитель</td><td>Apple</td><td>Apple</td><td>Apple</td></tr>
  <tr><td>Тип</td><td>смартфон</td><td>смартфон</td><td>смартфон</td></tr>
  <tr><td>Модель</td><td>Iphone 14 Pro Max</td><td>Iphone 13 Pro Max</td><td>Iphone 12 Pro Max</td></tr>
  <tr><td>Код товара</td><td></td><td></td><td></td></tr>
  <tr><th colspan="4">Система</th></tr>
  <tr><td>Оперативная память</td><td>6</td><td>6</td><td>4</td></tr>
  <tr><td>Встроенная память</td><td>256</td><td>128</td><td>128</td></tr>
  <tr><td>Беспроводная зарядка</td><td>да</td><td>да</td><td>да</td></tr>
</table>

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

Как реализовать механизм удаления строки если значения одинаковые?

Ответы