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

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

 <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. Cannot convert '0000-00-00 00:00:00' to TIMESTAMP

    在url上添加参数 zeroDateTimeBehavior=convertToNull jdbc:mysql://localhost/myDatabase?zeroDateTimeBehavior= ...

  2. 用HtmlLink来改变网站的主题

    #region Theme // 注册样式(将主题样式至于通用样式后面) HtmlLink themeCss = new HtmlLink(); themeCss.Href = GetThemeUrl ...

  3. webapi拦截请求

    [AttributeUsage(AttributeTargets.Method)] public class WebApiSensitive : ActionFilterAttribute { pub ...

  4. DoNet开源项目-基于jQuery EasyUI的后台管理系统

    博主在业余时间开发了一个简单的后台管理系统,其中用到了 jQuery EasyUI 框架,上次分享过系统布局,参考文章:jQuery EasyUI 后台管理系统布局分享,目前已完成系统的整体框架的搭建 ...

  5. 关于HTML css的一些题目

    1.dcutype是什么,他是干嘛用的 doctype是文档的一种声明,告诉浏览器器用什么规则来解析文档. 2.ul ol dl分别适用于什么地方? ul无序列表 ol有序列表 dl是定义列表,会默认 ...

  6. Swift语法基础入门二(数组, 字典, 字符串)

    Swift语法基础入门二(数组, 字典, 字符串) 数组(有序数据的集) *格式 : [] / Int / Array() let 不可变数组 var 可变数组 注意: 不需要改变集合的时候创建不可变 ...

  7. Java log4j的环境搭建

    一.Log4j是什么? Log4j是Apache的一个开源代码项目,通过使用Log4j,我们可以控制日志信息输出的目的地.最常见的就是输出到控制台或者日志文件.同时,它强大的一点是可以在C.C++等其 ...

  8. [Django] Windows 下安装 配置Pinax 工程

    Pinax 是一个基于Django开发的脚手架,有一些现成的模板和功能模块可以使用,方便快速有效的开发一个Django项目.下面举个例子如何安装一个pinax项目到集成开发环境Aptana里面. 先从 ...

  9. keil MDK编译器(V4.01)与H-JTAG的问题

    前一阵子转投到MDK下面做开发,因为公司以前都用h-jtag做下载仿真工具,用的h-jtag版本为V0.9,我拿以前在ads1.2中编译成功的程序,稍作修改,在mdk下编译成功,仿真也没有问题,但下载 ...

  10. Realview MDK 中不用手动开中断的原因

    startup.s启动代码文件: ; Enter Supervisor Mode and set its Stack Pointer MSR CPSR_c, #Mode_SVC:OR:I_Bit:OR ...