JQuery表格展开与内容筛选

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery表格展开与内容筛选相关的知识,希望对你有一定的参考价值。

单击分类的时候,可以关闭打开相对应的内容。例如点击前台设计组,则只显示前台设计组的内容。再次点击则收缩。

筛选的话就是匹配输入框的内容,如果某行数据存在,则显示出来。

 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>

 

以上是关于JQuery表格展开与内容筛选的主要内容,如果未能解决你的问题,请参考以下文章

jquery如何实现一个表格的筛选,也就是按条件查找筛选

jquery实现多条件筛选特效代码分享

使用select下拉菜单筛选table表格内容

使用JQuery实现表格奇数行一个颜色,双数行一个颜色。

jQuery为表格每行添加按钮操作相应行的内容

Jquery 组 tbale表格筛选