您的位置：首页 > Web前端 > JavaScript

js实现表格筛选功能

2017-01-18 12:19 981 查看

本应用就两个主要实现：

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 表格筛选

相关文章推荐

新的分享

章节导航