<html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

     <style type="text/css">

         table

         {

             width: 300px;

         }

         table, thead

         {

             border: 1px solid black;

             border-collapse: collapse;

         }

         .parent

         {

             background: lightgreen;

         }

         .selected

         {

             background: #fff38f;

         }

     </style>

     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $("#filterName").keyup(function () {

                 $("table tbody tr").hide().

                 filter(":contains('" + ($(this).val()) + "')").show()

                 .addClass("selected").keyup();

             });

         });

     </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <div>

     <p>

     筛选:<input type="text" id="filterName"/>

     </p>

         <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>

                 <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>

                 <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>

     </div>

     </form>

 </body>

 </html>

效果图:

jQuery学习笔记(8)--表格筛选的更多相关文章

  1. jQuery学习笔记(7)--表格展开关闭

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  2. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  3. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  4. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  5. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  6. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  7. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  8. jQuery学习笔记之概念（1）

    jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...

  9. 初步学习jquery学习笔记（五）

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

随机推荐

  1. [Python Cookbook] Numpy Array Slicing and Indexing

    1-D Array Indexing Use bracket notation [ ] to get the value at a specific index. Remember that inde ...

  2. GLB串

    题目描述 只要一个字符串中包含大写“GLB”,高老板就认为这是一个GLB串.现在给你一些字符串,请你帮高老板判断这些字符串是不是GLB串. 输入 首先是一个整数T,表示T行数据,每行一个字符串(只包括 ...

  3. luogu P1336 最佳课题选择

    题目描述 Matrix67要在下个月交给老师n篇论文,论文的内容可以从m个课题中选择.由于课题数有限,Matrix67不得不重复选择一些课题.完成不同课题的论文所花的时间不同.具体地说,对于某个课题i ...

  4. codeigniter 使用

    CodeIgniter系列 记录count和分页 对于某个表的不带条件的count,可以简单的用 $total = $this->db->count_all($table_name) 来获 ...

  5. 怎么把一个整数转化为3个十六进制字节 delphi

    如何把一个整数转化为3个十六进制字节 delphi比如把整数149259(都是6位数据整型数) 转换为十六进制为2470B然后再分开为三个字节02 47 0B,求实现代码示例var ID: Integ ...

  6. Linux shell 提取文件名和目录名的一些方法（转）

    很多时候在使用Linux的shell时,我们都需要对文件名或目录名进行处理,通常的操作是由路径中提取出文件名,从路径中提取出目录名,提取文件后缀名等等.例如,从路径/dir1/dir2/file.tx ...

  7. SVG图片背景透明

    今天在调整网页的时候,将logo以原有直接贴代码形式,改为加载文件. 其实真正的目的是做SEO.上次SEO交流后得出 结论:核心在于内容的本身的优化.信噪比很重要.也就是有效信息需要占文章的主要内容, ...

  8. 转: java服务器端成长指南

    from:  http://m.blog.csdn.net/article/details?id=45797155 前言 这是一份针对新手的服务端开发入门与进阶指南.遇到问题及时问你的 mentor ...

  9. 二叉查找树BST----java实现

                                                                    二叉查找树BST----java实现 1.二叉查找树简单介绍 二叉查找树 ...

  10. 上传项目至svn服务器，从svn上获取项目

    1.在桌面右键->TortoiseSVn->Repo_brower->输入地址,进入 ,ok 2.在地址目录上右键==>>add folder==>>选择你要 ...