我有一张包含一些用户详细信息的表格。我已经从 JSON 中填充了这些数据。在表格的底部，我有一个文本字段，供用户输入一些信息来过滤表格。 例如，
假设一个表包含 10 行。前 6 行包含开发人员详细信息，后 4 行包含测试人员详细信息。如果用户在文本框中键入 developer ，则表格应显示包含有关开发者信息的行。如何使用 jQuery 实现这一点？
我不想在这里发布我的错误代码。所以请不要让我发布一些代码。
【问题讨论】：
您可以使用filter() jquery 函数过滤行，直到找到<td> 与您在文本框中输入的内容相匹配的行，然后单击按钮进行过滤。
例子：
HTML：
<table id="myTable">
<thead><tr><td>Member</td><td>Stuff</td></tr></thead>
<tbody>
<tr><td>Developer</td><td>1</td></tr>
<tr><td>Developer</td><td>2</td></tr>
<tr><td>Developer</td><td>3</td></tr>
<tr><td>Tester</td><td>4</td></tr>
<tr><td>Tester</td><td>5</td></tr>
</tbody>
</table>
<input type="text" id="filter" />
<input type="button" id="btnFilter" value="Filter" />
Javascript：
$(document).ready(function() {
$("#btnFilter").click(function() {
$("#myTable tbody tr").show();
if($("#filter").val.length > 0) {
$("#myTable tbody tr").filter(function(index, elm) {
return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
}).hide();
}
});
});
工作小提琴：http://jsfiddle.net/tKqw9/1/
编辑： 将 toUpperCase() 添加到文本比较部分，以便比较不区分大小写。
还添加了对整个 <tr> 元素内容的比较，以便它可以搜索行中的任何单元格值。
【讨论】：
<tr> 内容
index 和 elm 参数是默认参数，可以在 $.each()、$.map 和 $.filter() 等 jquery 循环函数中使用，其中 index是当前元素在数组中的索引，elm 是对该循环迭代中使用的当前元素的引用。此外，我使用了两次toUpperCase() 以便能够进行不区分大小写的比较。第一个用途是大写 HTML 元素内容，第二个用途是大写文本框值。
您可能需要考虑像 Datatables 这样的插件。它具有与您正在寻找的功能类似的内置过滤器功能。
如果您不想或不能使用插件，可以使用other options out there。
【讨论】：