使用jquery过滤表行

我想知道如何根据列值过滤表行。 排除了插件，我想弄清楚如何使这个东西工作。

Answer 1

你的问题很模糊，但一般的想法是这样的：

$("td").filter(function() { return $(this).text().indexOf("whatever") !== -1; }).parent().remove(); 

这是一个有效的例子 。 它首先选择所有表格单元格，然后根据某些文本过滤它们，并删除任何剩余行的父级（应该是tr ）。

如果您不关心单个列，则可以选择tr元素并删除对parent的调用。 这仍然有效，因为text将返回所选tr的所有子项的文本。

根据评论更新

以上将完全从DOM中删除匹配的表行。 如果您只想隐藏它们，可以用hide替换remove 。 如果您想再次显示行，则可以执行以下操作：

 $("tr").show(); 

选择所有tr元素并显示它们（已经可见的元素不会受到影响，因此之前隐藏的元素将再次可见）。

Answer 2

所有表过滤背后的基本思想是隐藏所有行，然后显示

的内容包含searchstring的那些行。

使用jQuery，魔法就像这样：

 $('tr').filter(":contains('" + searchstring + "')").show(); 

但是没有必要为此使用jQuery – 我为它编写了一个简单的JS解决方案。 你可以在这里找到它。

Answer 3

这是过滤表行的另一个例子。 将filter值和表行文本设置为小写会使filter不区分大小写。

 $(function() { $("#filter").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#example-table > tbody > tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); 

       
 Filter:  
 
 
 
 
Firstname
 
Lastname
 
Age
 
 
 
 
 
Bob
 
Smith
 
50
 
 
 
Jenny
 
Smith
 
51
 
 
 
Mike
 
Smithers
 
52