2015-02-06 5 views
0

Я пытаюсь отфильтровать строки таблицы, чтобы отобразить результаты введенного текста в строке поиска. Код ниже выполняет эту работу, но по какой-то причине также фильтрует заголовки столбцов.Фильтрация строк таблицы при поиске

$('#search').keyup(function() { 
    var data = this.value.split(" "); 
    var rows = $(".Info").find("tr").hide(); 
    if(this.value ==""){ 
     rows.show(); 
     return; 
    } 
    rows.hide(); 
    rows.filter(function(i,v){ 
     var t = $(this); 
     for (var d = 0; d < data.length; d++) { 
      if (t.is(":Contains('" + data[d] + "')")) { 
       return true; 
      } 
     } 
     return false; 
    }).show(); 
}); 

HTML

<input type = "search" name = "search" id = "search"> 
<table style ="width:95%" class = "Info"> 
    <tr> 
     <th>Select </th> 
     <th>Name</th> 
     <th>Number</th> 
     <th>Date</th> 
    </tr> 
</table> 

Пользователь добавляет строки, которые почему я не написал никакого HTML для него.

Любая помощь будет оценена по достоинству. Заранее спасибо

ответ

0

http://jsfiddle.net/szjhngwm/

Похоже, что вам нужно фильтровать с помощью tbody

<table style ="width:95%" class = "Info"> 
<thead>  
<tr> 
     <th>Select </th> 
     <th>Name</th> 
     <th>Number</th> 
     <th>Date</th> 
    </tr> 
<thead> 
<tbody> 

</tbody> 
</table> 

var rows = $(".Info tbody tr").hide(); 
+0

Спасибо большое! это работает – user4538609

0

Другой способ сделать это было бы использовать JQuery в: Gt селектор().

Единственное, что изменится эта линия:

var rows = $(".Info").find("tr:gt(0)").hide(); 

Обратите внимание на добавление :gt(0) к вашему tr.

Смежные вопросы