我想知道如何根据列值过滤表格行。不包括插件，我想弄清楚如何让这个功能运作。
3个回答
23
你的问题比较模糊，但是一般的想法可能是这样的：
$("td").filter(function() {
return $(this).text().indexOf("whatever") !== -1;
}).parent().remove();
这里有一个可行的例子。它首先选择所有表格单元格，然后根据一些文本进行筛选，并删除任何剩余的行的父级（应该是tr）。
如果您不关心各列，可以选择tr元素并且不必调用parent函数。因为text将返回所选tr的所有子元素的文本内容。
更新：基于评论
上述方法将从DOM中彻底删除匹配的表格行。 如果您想仅隐藏它们，则可以将remove替换为hide。 然后，如果您想再次使行可见，只需执行以下操作：
$("tr").show();
- James Allardice
1
这个对 .hide() 也有效吗？如果可能的话，重置过滤器时展示/取消隐藏所有表格行有什么好方法？ - mko
17
这是另一个筛选表格行的示例。将筛选值和表格行文本转换为小写，使得筛选不区分大小写。
$(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>- Peter Tarlos
3
所有表格筛选的基本思想是隐藏所有行，然后显示其中包含搜索字符串的
使用jQuery实现如下：
<td> 内容的行。使用jQuery实现如下：
$('tr').filter(":contains('" + searchstring + "')").show();
但是在这种情况下没有必要使用jQuery - 我已经用纯JS编写了解决方案。 您可以在这里找到它。
- Stephan Weinhold
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接