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

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

 <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. json输出用法+jquery validate

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  2. 30个你不可不知的CSS选择器

    30个你不可不知的CSS选择器   一.五大基本选择符 1. *(通配符)*通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标 ...

  3. C# 知识点回顾

    一.基础知识 1.主函数:主函数是程序运行的入口. 2.数据类型: 值类型:整形(有符号.无符号)浮点型(float.double.decimal) 字符型(char.datetime) 结构体(范例 ...

  4. .NET自动更新

    asp.net b/s就是布置在服务器的.你这个是要单机版的更新机制,博客园里面好几篇文章说这事呢. http://www.cnblogs.com/cnsharp/archive/2013/04/11 ...

  5. Qt5 多显示器获取不同显示器的分辨率和位置的方法

    Qt5 多显示器获取不同显示器的分辨率和位置的方法 先放官方文档链接:QDesktopWidget - Qt5 Reference 之前一直在用被我乱搞后的ShadowPlayer作为默认播放器,后来 ...

  6. java后台获取国际化资源文件

    //current属性,由于此属性只做赋值操作,不做取值操作,因此没有get方法 private Locale current; public void setCurrent(Locale cur) ...

  7. OpenCV配置（Java）

    配置环境:MyEclipse2013+Jdk1.7(32位)+OpenCV 2.4.8+win8.1(64位) OpenCV安装路径:d:\Users\opencv为例 1.       导入Jar包 ...

  8. 获取mysqli函数的值和字段名

    <?php $mysqli=new mysqli("localhost", "root", "123456", "xsphp ...

  9. Python成长之路第一篇（4）_if,for,while条件语句

    有了以上的基本基础,已经上面写的几个小练习,大家肯定有很多的不满,比如查询为什么查询一次就退出了呢?下面我们来学习条件语句 一.万恶的加号 以前我们在print的时候如果要加上变量都有是使用+来作为连 ...

  10. QT creator+OpenCV2.4.2+MinGW 在windows下开发环境配置

    由于项目开发的原因,需要配置QT creator+OpenCV2.4.2+MinGW开发环境,现对配置方法做如下总结: 1.  下载必备软件 QT SDK for Open Source C++ de ...