使用 jquery 过滤表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7951014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Filter table rows with jquery
提问by mko
I would like to know how to filter table rows based on a column value. Plugins excluded, I would like to figure it out how to make this thing to work.
我想知道如何根据列值过滤表行。插件除外，我想弄清楚如何使这个东西工作。
回答by James Allardice
Your question is quite vague, but the general idea would be something like this:
你的问题很模糊，但总体思路是这样的：
$("td").filter(function() {
return $(this).text().indexOf("whatever") !== -1;
}).parent().remove();
Here's a working example. It first selects all table cells, then filters them based on some text, and removes the parent (which should be the tr) of any remaining rows.
这是一个工作示例。它首先选择所有表格单元格，然后根据一些文本过滤它们，并删除tr任何剩余行的父级（应该是）。
If you don't care about individual columns, you can select the trelements and get rid of the call to parent. That will still work because textwill return the text of all the children of the selected tr.
如果您不关心单个列，则可以选择tr元素并摆脱对parent. 这仍然有效，因为text将返回选定的所有子项的文本tr。
Updatebased on comments
根据评论更新
The above will remove the matching table rows from the DOM completely. If you want to just hide them, you can replace removewith hide. If you then wanted to make the rows visible again you could simply do something like:
以上将完全从 DOM 中删除匹配的表行。如果你只想隐藏它们，你可以remove用hide. 如果您然后想让行再次可见，您可以简单地执行以下操作：
$("tr").show();
Which selects all the trelements and shows them (ones that are already visible will not be affected, so just the ones previously hidden will become visible again).
它选择所有tr元素并显示它们（已经可见的元素不会受到影响，因此只有先前隐藏的元素将再次可见）。
回答by Peter Tarlos
Here's another example of filtering table rows. Turning the filter value and the table row text lowercase makes the filter case insensitive.
这是过滤表行的另一个示例。将过滤器值和表格行文本转为小写会使过滤器不区分大小写。
$(function() {
$("#filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#example-table > tbody > tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="filter">Filter:</label> <input type="text" id="filter">
</div>
<table id="example-table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jenny</td>
<td>Smith</td>
<td>51</td>
</tr>
<tr>
<td>Mike</td>
<td>Smithers</td>
<td>52</td>
</tr>
</tbody>
</table>
</body>
</html>回答by Stephan Weinhold
The basic idea behind all table-filtering is to hide all rows and then show those where the content of a <td>has the searchstring included.
所有表过滤背后的基本思想是隐藏所有行，然后显示<td>包含搜索字符串的内容的那些行。
With jQuery the magic is done like this:
使用 jQuery，魔法是这样完成的：
$('tr').filter(":contains('" + searchstring + "')").show();
But there's no need to use jQuery for this - I've coded a plain JS-solution for it. You can find it here.
但是没有必要为此使用 jQuery - 我已经为它编写了一个简单的 JS 解决方案。你可以在这里找到它。
