表格内容筛选
利用 contains 选择器结合 jQuery 的 filter() 筛选方法，可以实现表格的过滤。
filter() 方法：
-
filter()方法返回符合一定条件的元素。 -
该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。
-
该方法通常用于缩小在被选元素组合中搜索元素的范围。
-
filter()方法是与not()方法相对的。
语法为：
$(selector).filter(criteria,function(index))
参数说明：
-
criteria 可选。规定要从被选元素组合中返回的选择器表达式、jQuery 对象、一个或多个元素。如需规定多个条件，请使用逗号分隔。
-
function(index) 可选。为集合中的每个元素规定要运行的函数。如果返回 true，则保留元素，否则元素将被移除。index - 集合中元素的 index 位置。this 是当前的 DOM 元素。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<div>
<br />
筛选：<input id="filterName" />
<br />
</div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张一</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>张二</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>李五</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>李六</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王七</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王八</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王九</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#filterName').keyup(function(){
$('table tbody tr')
.hide()
.filter(":contains('" + $(this).val() + "')")
.show();
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号