特定の列の値に基づいてテーブルを検索する方法は？

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を取得しましたが、これはeclipseでは機能しません。

Answer 1

適切な列と列の値にCSSクラスを追加する簡単なスクリプトを書くことができます。たとえば：

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

、あなたが探して単純なカスタムフィルタを（書くことができます

を（あなたは、N番目の列は「.fruits'だけでなく、第一子、その唯一の例のようにカスタムクラスを追加することができます）果物の名前に「Z」という文字を含む）：

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