Как правильно настроить селектор jquery?

Question

Я пытаюсь реализовать функцию быстрого поиска/фильтрации в своей таблице с помощью jquery. В сущности, я хочу скрыть все строки, у которых нет строки, которую я ищу из поискового ящика, чтобы быть скрытым.

У меня есть динамически созданная таблица и текстовое поле, используемое в качестве фильтра для списка.

Таблица:

<table id="report-table" class="table"> 
<thead> 
    <tr> 
     <th class="">client</th> 
     <th class="">coach</th> 
     <th class="">groups</th> 

    </tr> 
</thead> 

<tbody> 
    <tr> 
     <td class="name">John</td> 
     <td class="coach">Peter </td> 
     <td class="groups"> Skiers </td> 
    </tr> 
</tbody> 

Ihave функции, привязанной к событию изменения в текстовом окне поиска. В этой функции я по существу хочу, чтобы выберет все tr, которые не содержат текстовую строку в столбце имени или тренера, и добавьте к ним класс. Я пробовал много вещей, но не получил синтаксис правильно, как он должен быть написан?

hideSearch: function(e){ 

     console.log("hideSearch called"); 
     var searchValue = this.$el.find('.search-text').val(); 

     if(!searchValue){ 
      console.log("hideSearch: empty search param"); 
      this.$el.find('tr').removeClass('hidden'); 
     } 
     else{ 
      console.log("hideSearch: searched for: " + searchValue); 
      //$('(#name, #groups):contains:not("'+searchValue+'")').parent().addClass('hidden'); 
      var selection =$('#name, #groups').('*:contains("'+searchValue+'")'); 

      console.log(selection); 
      //console.log($('#name, #groups').('*:contains("'+searchValue+'")')); 
      //$('(#name, #groups):contains("'+searchValue+'")').parent().addClass('hidden'); 
      //$('#name, #groups').('*:contains:not("'+searchValue+'")').parent().addClass('hidden'); 

     } 

Answer 1

$('#name, #groups').('*:contains("'+searchValue+'")'); будет в основном пытаются получить доступ к свойству *:contains("foo") (при условии, searchValue является "foo") объекта, возвращаемого $('#name, #groups'). Я считаю, что мне не нужно говорить, что объекты jQuery не имеют свойств с такими странными именами.

Прежде всего, вы должны дать всем ячейкам общий номер класс вместо удостоверения личности. Затем вы должны выбрать все строки и посмотреть, содержит ли значение .name или .coach. Используйте .filter, чтобы те, для которых ни клеток спичек:

$('#report-table > tbody > tr').filter(function() { 
    return $(this).children('.name').text().indexOf(searchValue) === -1 && 
      $(this).children('.coach').text().indexOf(searchValue) === -1; 
}).addClass('hidden'); 

Фильтр обратного вызова возвращает true если ни .name клетки, ни .coach ячейка содержит значение поиска. Те строки, для которых возвращается обратный вызов true, сохраняются в списке и получают добавленный к ним класс hidden.