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

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

 <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. 数据分析与R语言

    数据结构 创建向量和矩阵 函数c(), length(), mode(), rbind(), cbind() 求平均值,和,连乘,最值,方差,标准差 函数mean(), sum(), min(), m ...

  2. Silverlight学习（三）

    最近对WCFRIA+MVVM+Prism有了初步的认识,能够简单的实现一些数据库的交互.这节主要讲的是Silverlight通过domainservice和ado.net实体数据模型与数据库的交互.本 ...

  3. 03JS高级关于为空的变量判断

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. struts2.3.15.3中动态方法调用默认是关闭的

    初学ssh,用的struts2.3.15.3,使用了如下表单: <form action="/spring3/index/login.action" method=" ...

  5. 连接mysql数据库2+操作入门

    package 对数据库操作Statment; import java.sql.Connection; import java.sql.DriverManager; import java.sql.R ...

  6. N皇后问题 深搜+剪枝 hdu-2553

    N 皇后问题在此就不多介绍了,相信CS的同学都应经清楚了,不清楚也可自行Google(听说国内用不了Google了?令人发指!).在此以一道例题为引. hdu-2553 1 #include < ...

  7. js,jQuery数组常用操作小结

    一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...

  8. WebApp 里Meta标签大全

    1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...

  9. Node.js包管理器：

    Node.js包管理器: 当我们要把某个包作为工程运行的一部分时,通过本地模式获取,如果要在命令行下使用,则使用全局模式安装 使用全局模式安装的包并不能直接在JavaScript文件中用require ...

  10. php 垃圾回收机制----写时复制和引用计数

    PHP使用引用计数和写时复制来管理内存.写时复制保证了变量间复制值不浪费内存,引用计数保证了当变量不再需要时,将内存释放给操作系统. 要理解PHP内存管理,首先要理解一个概念----符号表. 符号表的 ...