使用jquery过滤表行
我想知道如何根据列值过滤表行。不包括插件，我想弄清楚如何让这个东西工作。
回答 3
Stack Overflow用户
发布于 2011-10-31 15:48:51
你的问题很模糊，但大意是这样的：
$("td").filter(function() {
return $(this).text().indexOf("whatever") !== -1;
}).parent().remove();这是一个working example。它首先选择所有表格单元格，然后根据一些文本对它们进行筛选，并删除其余行的父级(应该是tr)。
如果您不关心单个列，那么可以选择tr元素并取消对parent的调用。这仍然有效，因为text将返回所选tr的所有子对象的文本。
基于注释的更新
上面的操作将从DOM中完全删除匹配的表行。如果你只想隐藏它们，你可以用hide替换remove。如果您想让这些行再次可见，您可以简单地执行如下操作：
$("tr").show();它会选择所有的tr元素并显示它们(已经可见的元素不会受到影响，因此只有先前隐藏的元素才会再次可见)。
Stack Overflow用户
发布于 2018-07-07 16:15:06
这是另一个过滤表格行的例子。将筛选器值和表行文本转换为小写将使筛选器不区分大小写。
$(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>
Stack Overflow用户
发布于 2015-08-14 15:45:11
所有表过滤背后的基本思想是隐藏所有行，然后显示<td>内容包含搜索字符串的行。
在jQuery中，魔术是这样实现的：
$('tr').filter(":contains('" + searchstring + "')").show();但是没有必要为此使用jQuery --我已经为它编写了一个简单的JS解决方案。你可以在here上找到它。
https://stackoverflow.com/questions/7951014
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号