对于表格来说，当数据比较多的时候，我们无法一页一页的查找，这时可以通过一个搜索框来实现搜索。

对于这个搜素框，我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选，而不是填完以后点击搜索按钮再执行。

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <script src="jquery-1.3.2.min.js"></script>
  7.     <link href="css/style.css" rel="stylesheet" type="text/css" />
  8.     <script>
  9.         $(function () {
  10.             $("tr.parent").click(function () {
  11.                 $(this)
  12.                 .siblings('.child_'+this.id).toggle();
  13.  
  14.             });
  15.             $("tr.parent").addClass("selected");
  16.             $("#searchbox").keyup(function () {
  17.                 $("table tbody tr").hide()
  18.                 .filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。
  19.             }).keyup();
  20.         });
  21.     </script>
  22.     <title></title>
  23. </head>
  24. <body>
  25.     <label>筛选</label>
  26.     <input type="text" id="searchbox"/>
  27.     <table>
  28.         <thead>
  29.             <tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
  30.         </thead>
  31.         <tbody>
  32.             <tr class="parent" id="row_01"><td>前台设计组</td></tr>
  33.             <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
  34.             <tr class="child_row_01"><td>李山</td><td>男</td><td>湖北</td></tr>
  35.             <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
  36.             <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
  37.             <tr class="parent" id="row_02"><td>前台设计组</td></tr>
  38.             <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
  39.             <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
  40.             <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
  41.             <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
  42.             <tr class="parent" id="row_03"><td>前台设计组</td></tr>
  43.             <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
  44.             <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
  45.             <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
  46.             <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
  47.         </tbody>
  48.     </table>
  49. </body>
  50. </html>

jquery实现表格内容筛选的更多相关文章

  1. [原创]Jquery实现表格内容点击隐藏显示内容

    1.首先看效果,点击红色字体,可是查看全部文字内容 2.JS实现 思路:将Ajax获得的数据,一份截取,一份不变,放到td里面,分别用span装着. 然后通过display属性,进行切换

  2. js实现前端动态筛选表格内容

    代码参考: http://www.sharejs.com/codes/javascript/4289 http://www.jb51.net/article/103420.htm https://ww ...

  3. jqgrid 表格中筛选条件的多选下拉，树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]

    /** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...

  4. jQuery对表格的操作及其他应用

    表格操作 1.隔行变色:对普通表格进行隔行换色:单击显示高亮样式:复选框选中高亮 <!DOCTYPE html> <html> <head> <meta ht ...

  5. jQuery对表格的操作

    1.表格变色 (1)普通的隔行变色 CSS代码: .even{background:#fff;}   //偶数行样式 .even{background:#fff;}   //奇数行样式 ①包括表头 $ ...

  6. jquery 表格排序，实时搜索表格内容

    jquery 表格排序,实时搜索表格内容   演示 XML/HTML Code <table class="table-sort"> <thead> < ...

  7. jquery 内容筛选选择器

    基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 注意事项: :contains与:has都 ...

  8. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

  9. 第七章 jQuery操作表格及其它应用

    1.表格变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org ...

随机推荐

  1. [Compose] 20. Principled type conversions with Natural Transformations

    We learn what a natural transformation is and see the laws it must obey. We will see how a natural t ...

  2. 替换GitBlit的证书为域证书

    GitBlit(当前版本1.6.2,http://gitblit.org/) 是一个Git版本控制的服务端,使用java编写,功能上足够满足基本的版本控制要求,而且部署很简单方便,比如windows上 ...

  3. Codeforces 55D Beautiful Number （数位统计）

    把数位dp写成记忆化搜索的形式,方法很赞,代码量少了很多. 下面为转载内容:  a positive integer number is beautiful if and only if it is  ...

  4. 所有博客已经迁移到个人空间 blog.scjia.cc

    所有博客已经迁移到个人空间 blog.scjia.cc

  5. Selenium Grid 学习笔记

    Selenium Grid 学习笔记http://www.docin.com/p-765680298.html

  6. 实例学习Backbone.js（一）

    前面有两篇文章介绍了Backbone的model.collection和view,那么接下来我想用一个完整的Demo来记录我学习的过程, 单页操作,实现数据的增删改,后台使用json做数据库,通过re ...

  7. 细数Qt开发的各种坑(欢迎围观)

    1:Qt的版本多到你数都数不清,多到你开始怀疑人生.从4.6开始到5.8,从MSVC编译器到MINGW编译器,从32位到64位,从Windows到Linux到MAC.MSVC版本还必须安装对应的VS2 ...

  8. 译：C#面向对象的基本概念 (Basic C# OOP Concept) 第二部分（封装，抽象，继承）

    6.封装 封装就是对外部类隐藏成员或变量.我已经说过房子的保安仅仅被限制在房子的入口处,不需要知道屋内发生了什么.房主对保安隐藏了屋内所发生的任何事,以便更安全.隐藏和限制就被称为封装. 例如我们有两 ...

  9. .htaccess 语法以及应用

    [转] http://blog.sina.com.cn/s/blog_6e8b46e701014drc.html http://blog.sina.com.cn/s/blog_6e8b46e70101 ...

  10. 常用的sql语句（找不同位数，找重复）

    1.SQL找不同位数 select length(aae135),count(1) from ac01 group by  length(aae135) ; ————————————————————— ...