Как искать в таблице на основе определенного значения столбца?

Question

Мне нужно реализовать окно поиска в таблице html с помощью раскрывающегося списка, чтобы я мог искать данные по определенному заголовку столбца.

<table> 
    <thead> 
    <tr> 
     <th>Fruit</th> 
     <th>Color</th> 
    </tr> 
    </thead> 
    <tr> 
     <td>Apple</td> 
     <td>Green</td> 
    </tr> 
    <tr> 
     <td>Grapes</td> 
     <td>Green</td> 
    </tr> 
    <tr> 
     <td>Orange</td> 
     <td>Orange</td> 
    </tr> 
</table> 

Я получил Fiddle, но это не работает в затмении.

Answer 1

Вы можете написать простой скрипт, который добавит класс CSS для правильных значений столбца и столбца. Например:

$("tr:first-child").addClass('fruits'); 

(вы можете добавить пользовательский класс как».fruits' для N-го столбца, а не только первого ребенка, его только в качестве примера)

, то вы можете написать простой пользовательский фильтр (поиск фрукты с буквой «Z» на имя):

var resultsOfSearchingFruitsWithZLetter = []; 
$.each($('.fruits'), function(val) { 
    if(val.val().indexOf('z') > -1) { 
     resultsOfSearchingFruitsWithALetter.push(val.val()); 
    } 
});