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

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

 <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. asp.net session的原理

    session,会话,指的就是用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间. A用户和C服务器建立连接时所处的Session同B用户和C服务器建立连 ...

  2. 表达式求值（河南省第四届ACM试题-C题）题解

    以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定指定的一个由3种函数组成的表达式,计算其数值. [题目分析] 一开始以为是后缀表达式,后来抽了没想出来,最后用了递归的方法解 ...

  3. List和Tuple类型

    list列表,list是一种有序的集合,可以随时添加和删除其中的元素,L=[]   索引从0开始,第一个元素的索引是0,第二个是1,倒数第一个是-1,倒数第二个是-2,以此类推,使用索引,不要越界   ...

  4. mvc 跳转到另一个页面 Controller带参数

    跳转到链接    // Controller        public ActionResult Detail(int MessageId)        {             BLL.ZQS ...

  5. J2SE知识点摘记(三)

    1.         在java只允许单继承,而不允许多重继承,也就是说一个子类只能有一个父类.但在java中却允许多层继承. 2.         非内部Class只能被public或者defaul ...

  6. Oracle EBS-SQL (PO-2):检查当月到货补单的记录数.sql

    SELECT          DECODE(PLLA.FROM_LINE_ID,'-1','手工','','自动创建') 下达方式,          rsh.receipt_num         ...

  7. WPF Bug清单之（13）——应该出现却没有出现的ListView水平滚动条

    转载地址:http://www.cnblogs.com/nankezhishi/archive/2010/03/17/wpfbug13.html 我们知道ListView在内容超出控件本身范围时,默认 ...

  8. 使用keil判断ARM的冷启动和热启动的方法

    微处理器:LPC2114 编译环境:Keil MDK V4.10 思路: 常把单片机系统的复位分为冷启动和热启动.所谓冷启动,也就是一般所说的上电复位,冷启动后片内外RAM的内容是随机的,通常是0x0 ...

  9. InstallShield 工程类型MSI 使用过程中碰到的问题及解决方法。

    原文 http://www.cnblogs.com/daocaorenbx/p/InstallShield.html 一.安装完 桌面创建IE快捷方式: 1.  install script可以直接建 ...

  10. android 为TextView添加边框

    今天需要在TextView上面添加一个边框,但是TextView本身不支持边框,所以只能采用其他方式,在网上查询了一下,主要有三种方式可以实现1.带有边框的透明图片2.使用xml的shape设置3继承 ...