Скрытие некоторых частей html таблицы с помощью jQuery

Question

Рассмотрим следующий фрагмент:

jQuery(".zoekopcat").on("keyup", function() {
  var value = jQuery(this).val();

  jQuery("table tr").each(function(index) {
    if (index !== 0) {
      row = jQuery(this);

      var id = row.find("strong:contains(" + value + ")").text();

      if (id.indexOf(value) !== -1) {
        row.show();
      } else {
        row.hide();
      }
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="zoekopcat">
<table>
  <tr>
    <td colspan=7><strong>Face</strong</td>
  </tr>
  <tr>
    <td>Product1</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
   <tr>
    <td>Product2</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td colspan=7><strong>Hands</strong</td>
  </tr>
  <tr>
    <td>Product1</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
   <tr>
    <td>Product2</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Если, например, я введу «Лицо» в поле поиска, я хочу, чтобы оно показывало слово «Лицо» и продукт 1 и 2 из « Лицо », продукты« Руки »должны быть скрыты ...., а если я наберу« Руки »,« Лицо »и его продукты должны быть скрыты, и т. Д. c ....

У меня есть следующий код jQuery уже работает, но если я наберу "Face" в поле поиска, он показывает "Face", но не соответствующий продукт 1 и 2 ....

Теперь я должен показать продукт 1 и 2 также и спрячем все остальное ...

Answer 1

Добавление в строки идентифицирующего атрибута data очень помогает и делает код JavaScript очень простым.

HTML:

<input type="text" class="zoekopcat">
<table>
  <tr data-category="Face">
    <td colspan="7"><strong>Face</strong></td>
  </tr>
  <tr data-category="Face">
    <td>Product1</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
   <tr data-category="Face">
    <td>Product2</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr data-category="Hands">
    <td colspan="7"><strong>Hands</strong></td>
  </tr>
  <tr data-category="Hands">
    <td>Product3</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
   <tr data-category="Hands">
    <td>Product4</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

JavaScript:

jQuery(".zoekopcat").on("keyup", function() {
  var value = jQuery(this).val();

  jQuery("table tr").each(function() {
    var rowCat = $(this).data('category');
    if (rowCat.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
        $(this).show();
    } else {
        $(this).hide();
    }
  });
});

Демонстрация в реальном времени: https://jsfiddle.net/bkxLf3p0/

Редактировать: Я добавил toLowerCase() в сравнение строк (= поиск без учета регистра) как мне показалось полезным

Answer 2

Вот решение jquery, использующее .nextUntil.

1. получает все строки "заголовка" (в данном случае strong в первом тд)
2. находит те, которые соответствуют вводу
3. скрывает все строки (начинаются с чистого листа)
4. проходит по каждой соответствующей строке заголовка
5. использует .nextUntil для найти следующую строку заголовка (но не включая ее (как в «пока»))
6. показывает строки между

$(".zoekopcat").on("keyup", function() {
  var val = $(this).val().toUpperCase();

  var headerRows = $("table tr td:first-child>strong").closest("tr");
  var matchRows = headerRows.filter((i,e) => 
                    $(e).text().toUpperCase().indexOf(val) >= 0);
  $("table tr").hide();
  matchRows.each(function() {
    $(this).show().nextUntil(headerRows).show();
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="zoekopcat">
<table>
  <tr>
    <td colspan=7><strong>Face</strong></td>
  </tr>
  <tr>
    <td>Product1</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>Product2</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td colspan=7><strong>Hands</strong></td>
  </tr>
  <tr>
    <td>Product1</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>Product2</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Answer 3

Во-первых, я исправил небольшую ошибку с HTML, где ваши strong теги не были правильно завершены. Кроме того, я удалил проверку для первой строки, поскольку это означало, что Face всегда будет отображаться независимо от значения поиска.

Для решения этой проблемы я использую логическую переменную shouldShow для укажите, должна ли отображаться текущая строка.

Код выполняет итерацию по строкам таблицы, как и ранее, и затем проверяет, содержит ли текущая строка тег strong. Если это так, он определяет, соответствует ли это тому, что ищется, и устанавливает shouldShow соответствующим образом.

shouldShow затем используется для определения, показывать или скрывать строку. Смотрите рабочий фрагмент ниже:

jQuery(".zoekopcat").on("keyup", function() {
  var value = jQuery(this).val();
  var shouldShow = false;
  
  jQuery("table tr").each(function(index) {
    row = jQuery(this);

    if (row.find("strong").length) {
      var id = row.find("strong:contains(" + value + ")").text();

      if (id.indexOf(value) !== -1) {
        shouldShow = true;
      } else {
        shouldShow = false;
      }
    }
    
    if (shouldShow) {
      row.show();
    } else {
      row.hide();
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="zoekopcat">
<table>
  <tr>
    <td colspan=7><strong>Face</strong></td>
  </tr>
  <tr>
    <td>Product1</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>Product2</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td colspan=7><strong>Hands</strong></td>
  </tr>
  <tr>
    <td>Product1</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
   <tr>
    <td>Product2</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>