js实现表格筛选功能
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
本文主要介绍了js实现表格筛选功能的代码。具有一定的参考价值，狼蚁网站SEO优化跟着长沙网络推广一起来看下吧
本应用就两个主要实现：
1.表格的id 和 class之间的命名关系
请看图： 将组名和个人信息联表格联系起来，这样会很好的操作表格
HTML代码：
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> <tr class="child_row_01"><td>张三</td><td>男</td><td>浙江宁波</td></tr> <tr class="child_row_01"><td>李四</td><td>男</td><td>浙江宁波</td></tr> <tr class="child_row_01"><td>胡歌</td><td>男</td><td>浙江宁波</td></tr> <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr> <tr class="child_row_02"><td>李三</td><td>男</td><td>浙江宁波</td></tr> <tr class="child_row_02"><td>张无忌</td><td>男</td><td>浙江宁波</td></tr> <tr class="child_row_02"><td>孔子</td><td>男</td><td>浙江宁波</td></tr>
2.就是筛选功能的使用：使用filter联合contains将输入框的字加入contains进行筛选
javascript代码：
//设置列表查询
$("#filterName").keyup(function () {
$("table tbody tr").stop().hide() //将tbody中的tr都隐藏
.filter(":contains('"+($(this).val())+"')").show(); //，将符合条件的筛选出来
});
狼蚁网站SEO优化是完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格应用</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid #000;
margin:50px auto;
width: 340px;
padding: 10px 10px;
}
.box table{
margin: auto;
}
.box .box-top{
width: 303px;
margin: 5px auto;
}
.box table tr td,th{
padding: 5px 30px;
text-align: center;
}
.box table .parent{
background: lightgray;
}
.selected{
background: gray !important;
}
.selectHeight{
background: darkseagreen !important;
}
</style>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
//默认让王五选中
$("tr:contains('王五')").addClass("selectHeight")
//点击让其展示出列表 默认让其都隐藏
$(".box tr.parent").click(function () {
$(this)
.toggleClass("selected")
.siblings(".child_"+this.id).stop().toggle();
}).click();//此行代码表示要立即执行
//设置列表查询
$("#filterName").keyup(function () {
$("table tbody tr").stop().hide() //将tbody中的tr都隐藏
.filter(":contains('"+($(this).val())+"')").show(); //，将符合条件的筛选出来
});
});
</script>
<div class="box">
<div class="box-top">
<span>筛选：</span><input type="text" id="filterName">
</div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张三</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>李四</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>胡歌</td><td>男</td><td>浙江宁波</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td>李三</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_02"><td>张无忌</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_02"><td>孔子</td><td>男</td><td>浙江宁波</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后台设计组</td></tr>
<tr class="child_row_03"><td>王五</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_03"><td>单志永</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_03"><td>刘粒粒</td><td>男</td><td>浙江宁波</td></tr>
</tbody>
</table>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持狼蚁SEO！
上一篇：原生js实现回复评论功能
下一篇：js放大镜放大购物图片效果