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

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

  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.      </style>
  7.       <script type="text/javascript">
  8.          $(function(){
  9.              $('tr.parent').click(function(){
  10.                  $(this)
  11.                  .siblings('.child_'+this.id).toggle();//sibling是寻找同级节点
  12.              }).click();//加上click可以在界面加载完后使所有的分类收缩，要不然就是全部展开了
  13.              $('#filtername').keyup(function(){
  14.                  $("table tbody tr").hide().filter(":contains('"+($(this).val())+"')").show();//filter寻找匹配的内容
  15.              });
  16.          });
  17.       </script>
  18.  <body>
  19.      筛选：<input type="text" id="filtername"/>
  20.      <table>
  21.      <thead>
  22.          <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
  23.      </thead>
  24.      <tbody>
  25.          <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
  26.          <tr class="child_row_01"><td>张一</td><td>男</td><td>宁波</td></tr>
  27.          <tr class="child_row_01"><td>张二</td><td>女</td><td>杭州</td></tr>
  28.      </tbody>
  29.      <tbody>
  30.          <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
  31.          <tr class="child_row_02"><td>张三</td><td>男</td><td>北京</td></tr>
  32.          <tr class="child_row_02"><td>李四</td><td>女</td><td>上海</td></tr>
  33.      </tbody>
  34.      <tbody>
  35.          <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
  36.          <tr class="child_row_03"><td>王力</td><td>男</td><td>广州</td></tr>
  37.          <tr class="child_row_03"><td>陈珊</td><td>女</td><td>厦门</td></tr>
  38.      </tbody>
  39.      </table>
  40.  </body>
  41.  </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. RMAN备份之丢失数据文件及控制文件的恢复

    About Recovery with a Backup Control FileIf all copies of the current control file are lost or damag ...

  2. HTML 基础 2

    1. 认识CSS样式: CSS:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式 语法: 选择符{ 属性: 值} 举例: p{ color: b ...

  3. timeout Timeout时间已到.在操作完成之前超时时间已过或服务器未响应

    Timeout时间已到.在操作完成之前超时时间已过或服务器未响应 问题 在使用asp.net开发的应用程序查询数据的时候,遇到页面请求时间过长且返回"Timeout时间已到.在操作完成之间超 ...

  4. JS中slice,splice,split的区别

    不知道大家对slice,splice,splite是肿么样的感觉,反正我刚接触到这三个函数的时候整个人都懵了,因为一个个长的跟孪生兄弟似的,每次用的时候都会混,于是决定记下来,也给大家当个参考吧. s ...

  5. HDU 1004 - Let the Balloon Rise（map 用法样例）

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  6. TCP/IP详解之：TCP

    第17章 TCP:传输控制协议 TCP提供了一种可靠的面向连接的字节流运输层服务 TCP的服务 尽管TCP和UDP都使用相同的网络层(IP),TCP却向应用层提供与UDP完全不同的服务. TCP通过下 ...

  7. Qt3D教程

    美其名曰教程 其实就是自己的学习之旅 惯例第一章是qt3d的安装 首先说下环境 Windows_Xp_sp3 下载链接 Qt library 4.8.5 下载链接 (在安装Qt library之前,需 ...

  8. PHP Version之PHP5.2.x到5.3.x

    不向下兼容的变化 1.  在5.3的所有绑定扩展中应用了新的内部参数解析API,当给函数传递不兼容的参数时将返回NULL,但有些例外,比如函数get_class()在出现错误时返回FALSE 2.  ...

  9. smarty的简单介绍

    我们可以看到,smarty的程序部分实际就是符合php语言规范的一组代码,我们依次来解释一下:1./**/语句: 包含的部分为程序篇头注释.主要的内容应该为对程序的作用,版权与作者及编写时间做一个简单 ...

  10. 提升进程权限为DEBUG权限

    在网上也看到了一些提升进程令牌的函数但都不怎么好用,最后我还是从一个黑客后门程序的源代码中提取出了一个好的提升进程令牌的函数,不敢独享,跟大家分享下.那个后门真的写的很好... Hysia提示你: 这 ...