js实现表格筛选功能
更新时间：2017年01月18日 12:19:05 作者：单先生
本文主要介绍了js实现表格筛选功能的代码。具有一定的参考价值，下面跟着小编一起来看下吧
本应用就两个主要实现：
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(); //，将符合条件的筛选出来
});
下面是完整代码：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了jquery实现鼠标滑过后动态图片提示效果,涉及jquery鼠标事件及页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了jquery插件实现图片对比，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
Jquery Easyui验证组件ValidateBox使用详解（20）
这篇文章主要为大家详细介绍了Jquery Easyui自定义下拉框组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
在今天之前，我对jQuery的中的animate()方法还停留在最常见的用法，查了一下手册，发现在1.8的时候增加了几个比较有用的回调函数，想着就来总结下jQuery中animate的几种用法与注意事项，方便自己或者大家有需要的时候参考借鉴，下面来一起看看吧。2016-12-12
在测量中 面是有不同的点组成，在输入的时候 需要动态的添加 不同点的坐标值2010-05-05
这篇文章主要介绍了jquery实现图片左右切换的方法,设计jQuery操作页面元素及对应样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-05-05
公司网站目前的访问用户中使用IE6.0的站50%以上,所以必需兼容IE6.0,使用jquery在IE6.0中设置下拉框时会有以下一些问题2010-04-04
一个JQuery操作Table的代码分享，需要的朋友可以参考下2012-03-03
在做项目的时候，我们经常需要用到地址之类的省市区三级联动的，今天就给大家分享一个非常简洁的省市区三级联动的代码，基于jQuery，附上GIT地址，有需要的小伙伴可以直接拿走2015-04-04
这篇文章主要介绍了jQuery中:checked选择器用法,实例分析了:checked选择器的功能、定义及选取选中的复选框或单选按钮时的使用技巧,需要的朋友可以参考下2015-01-01
最新评论