单击分类的时候，可以关闭打开相对应的内容。例如点击前台设计组，则只显示前台设计组的内容。再次点击则收缩。
筛选的话就是匹配输入框的内容，如果某行数据存在，则显示出来。
1 <html> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <script type="text/javascript" src="jquery-1.11.3.js"></script> 4 <style type="text/css"> 5 6 7 </style> 8 <script type="text/javascript"> 9 $(function(){ 10 $('tr.parent').click(function(){ 11 $(this) 12 .siblings('.child_'+this.id).toggle();//sibling是寻找同级节点 13 }).click();//加上click可以在界面加载完后使所有的分类收缩，要不然就是全部展开了 14 $('#filtername').keyup(function(){ 15 $("table tbody tr").hide().filter(":contains('"+($(this).val())+"')").show();//filter寻找匹配的内容 16 }); 17 }); 18 </script> 19 <body> 20 筛选：<input type="text" id="filtername"/> 21 <table> 22 <thead> 23 <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> 24 </thead> 25 <tbody> 26 <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> 27 <tr class="child_row_01"><td>张一</td><td>男</td><td>宁波</td></tr> 28 <tr class="child_row_01"><td>张二</td><td>女</td><td>杭州</td></tr> 29 </tbody> 30 <tbody> 31 <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr> 32 <tr class="child_row_02"><td>张三</td><td>男</td><td>北京</td></tr> 33 <tr class="child_row_02"><td>李四</td><td>女</td><td>上海</td></tr> 34 </tbody> 35 <tbody> 36 <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr> 37 <tr class="child_row_03"><td>王力</td><td>男</td><td>广州</td></tr> 38 <tr class="child_row_03"><td>陈珊</td><td>女</td><td>厦门</td></tr> 39 </tbody> 40 </table> 41 </body> 42 </html>
