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

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

 <html>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <script type="text/javascript" src="jquery-1.11.3.js"></script>

     <style type="text/css">

     </style>

      <script type="text/javascript">

         $(function(){

             $('tr.parent').click(function(){

                 $(this)

                 .siblings('.child_'+this.id).toggle();//sibling是寻找同级节点

             }).click();//加上click可以在界面加载完后使所有的分类收缩，要不然就是全部展开了

             $('#filtername').keyup(function(){

                 $("table tbody tr").hide().filter(":contains('"+($(this).val())+"')").show();//filter寻找匹配的内容

             });

         });

      </script>

 <body>

     筛选：<input type="text" id="filtername"/>

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

     </tbody>

     <tbody>

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

     </tbody>

     <tbody>

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

     </tbody>

     </table>

 </body>

 </html>

JQuery表格展开与内容筛选的更多相关文章

  1. jquery 表格排序，实时搜索表格内容

    jquery 表格排序,实时搜索表格内容   演示 XML/HTML Code <table class="table-sort"> <thead> < ...

  2. jquery 内容筛选选择器

    基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 注意事项: :contains与:has都 ...

  3. jQuery 表格

    jQuery 表格插件汇总     本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分 ...

  4. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. 推荐几款jQuery表格插件

    平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...

  6. JQuery表格操作的常用技巧总结

    JQuery对表格进行操作的常用技巧. 1.表格奇数行和偶数行分别添加样式 复制代码代码如下: $(function(){  $('tr:odd').addClass("odd") ...

  7. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  8. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. ORACLE MTTR

    实例恢复时间:指的是将数据文件的最后一个检查点(检查点位置)推进到控制文件中记录的最新SCN 所需的时间.管理员可以通过设置MTTR 目标以及调整重做日志组的大小来控制该时间.MTTR 指导:Mean ...

  2. linux 命令入门

    1 linux 中,一切皆文件. 图片.MP3和视频,它们都是文件. 目录,是一种特殊的文件,其中包含其他文件的信息.磁盘驱动器则是真正的大文件了. 网络连接也是文件,甚至运行中的进程都是文件.这些都 ...

  3. flex布局的使用，纪念第一次开发手机网站

    一直专注于PC网站的开发,不曾接触手机网站,于今日机缘巧合也是公司业务需要,并在之前学习过flex的布局,于是一并实践.碰到的问题还是很多的,主要是谈谈flex布局. flex布局是css3里的内容, ...

  4. UVa 1585 - Score

    得分是目前连续O 的个数,遇到X置0 #include <cstdio> #include <iostream> #include <cstring> using ...

  5. .Net之垃圾回收算法

    垃圾回收器检测托管堆中是否有应用程序不在使用的任何对象,如果一次垃圾回收之后,堆栈没有可用的内存,new操作符将会抛出OutOfMemoryException(内存溢出). 每一个应用程序都包含一组根 ...

  6. 多个DLL合并，DLL合并到EXE

    1:) 下载 http://download.microsoft.com/download/1/3/4/1347C99E-9DFB-4252-8F6D-A3129A069F79/ILMerge.msi ...

  7. spring+hibernate

    添加注解时spring是添加在set方法上而hibernate是添加在get方法上 事务应该加在service层上,而不是加在dao层上,如果加在dao层上回滚的时候只能回滚一个dao的实现. 事务处 ...

  8. CmdParse

    Procedure URPOSE Uses Dos,Crt; Const VersionNum = 'V1.0 BETA'; ProgNameStr = 'NEWPROJ.EXE'; ProgName ...

  9. Python之路第四天，基础(4)-装饰器，迭代器，生成器

    装饰器 装饰器(decorator)是一种高级Python语法.装饰器可以对一个函数.方法或者类进行加工.在Python中,我们有多种方法对函数和类进行加工,比如在Python闭包中,我们见到函数对象 ...

  10. Stack的实现

    public class MyStack<AnyType> { private AnyType [] theItems; private final int DEFAULT_CAPACIT ...