Как скрыть повторяющие строки в сравнении с помощью JS?

Question

[Alex_Omsk]

Доброго дня!
Делаю модуль сравнения для сайта. При сравнении нескольких товаров, данные выводятся в таблицу вида:

<table name="table">
<tbody>
  <tr>
    <td class="option">Диагональ экрана</td>
    <td class="value">82 см</td>
    <td class="value">82 см</td>
    <td class="value">102 см</td>
  </tr>
  <tr>
    <td class="option">Технология</td>
    <td class="value">LED</td>
    <td class="value">LED</td>
    <td class="value">LED</td>
  </tr>
  <tr>
    <td class="option">Разрешение экрана</td>
    <td class="value">1920x1080</td>
    <td class="value">1920x1080</td>
    <td class="value">1920x1080</td>
  </tr>
  <tr>
    <td class="option">Поддержка SmartTV</td>
    <td class="value">Да</td>
    <td class="value">Нет</td>
    <td class="value">Нет</td>
  </tr>
</tbody>
</table>

Требуется кнопка, при нажатии на которую скроются строки с одинаковыми значениями.
Я так понимаю, что нужно с помощью JS присвоить класс строке tr, если значения внутри ячеек td class="value" одинаковы. И уже при нажатии на кнопку будут скрываться эти строки. Помогите реализовать пожалуйста

Answer 1

[Stalker_RED]

Ищем все строки querySelectorAll(tr)
В каждой строке выбираем ячейки (опять querySelectorAll)
Получаем значения
Берем значение из первой ячейки, сравниваем с остальными (every)
Применяем класс, если нужно

https://jsfiddle.net/twr5L9aa/

Comments

[Alex_Omsk]

Спасибо! Отличное рабочее решение!