本应用就两个主要实现：
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>
