如何根據特定列值在表中進行搜索？

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'); 

（你可以添加自定義類，如」 .fruits'的第N列，不僅是第一胎，它只是一個例子）

，那麼你可以編寫簡單的自定義過濾器（搜索水果與'Z'字母的名稱）如：

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