<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>
