效果：

   输入筛选字段后显示效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head>

<title></title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

<!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

  $(function(){

       $("#filterName").keyup(function(){   //keyup:当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。http://jquery.cuishifeng.cn/keyup.html

          $("table tbody tr")

                    .hide()

                    .filter(":contains('"+( $(this).val() )+"')")  
                               // :contains(text):匹配包含给定文本的元素 http://jquery.cuishifeng.cn/contains.html                               // filter:筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式http://jquery.cuishifeng.cn/filter.html

                    .show();
       }).keyup();

  })

</script>

</head>

<body>

<div>

<br/>

筛选：

<input id="filterName" />

<br/>

</div>

<table>

    <thead>

        <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>

    </thead>

    <tbody>

        <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>

        <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>

        <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>

        <tr><td>找六</td><td>男</td><td>浙江温州</td></tr>

        <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>

        <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>

        <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr>

        <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr>

        <tr><td>李四</td><td>男</td><td>湖南长沙</td></tr>

    </tbody>

</table>

</body>

</html>

css

table        { border:0;border-collapse:collapse;}

div{font:normal 12px/17px Arial;}

td    { font:normal 12px/17px Arial;padding:2px;width:100px;}

th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}

.even        { background:#FFF38F;}  /* 偶数行样式*/

.odd        { background:#FFFFEE;}  /* 奇数行样式*/

.selected        { background:#FF6500;color:#fff;}

jquery表单内容过滤的更多相关文章

  1. JQuery表单元素过滤选择器

    此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素 ...

  2. jQuery 表单内容的获取

    var formData = $('#myform').serialize()

  3. Jquery | 基础 | 使用 jQuery 表单过滤选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  5. jquery表单验证使用插件formValidator

    JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...

  6. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  7. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

  8. jquery表单序列化

    $(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json" ...

  9. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

随机推荐

  1. Hive技术文档

    Hive是什么? Hive是蜂房的意思,为什么hadoop上的这层数据仓库叫Hive? 因为生物学上蜂房是一个结构相当精良的建筑,取名Hive足见则个数据仓库在数据存储上也是堪称精良的.Hive是Fa ...

  2. ThreadPoolExecutor使用和思考(上)-线程池大小设置与BlockingQueue的三种实现区别

    工作中多处接触到了ThreadPoolExecutor.趁着现在还算空,学习总结一下. 前记: jdk官方文档(javadoc)是学习的最好,最权威的参考. 文章分上中下.上篇中主要介绍ThreadP ...

  3. Android 高仿微信 获取最近刚刚拍照的缩略图 功能实现

    原理其实挺简单的,android 中文件 修改 增加 删除等等 都会在数据库里的某个表里记录下来,你需要的时候 只要迅速的去查找这个表里的值 即可得到你想要的所有信息. 实际上 如果真正理解这个表结构 ...

  4. 安装sass时，gem在国内不能安装的解决

    最近在安装SASS的时候,用到gem命令,但是运行出行如下错误!(先声明,安装sass前,要保证自己电脑安装了ruby:ruby -v可以测试下有没有装) 原因是ruby 的gem被和谐了,现在淘宝的 ...

  5. C++调试 输出数组内容和数组名

    #include <cstdio> using namespace std; //函数定义 #define printArr(arr,n,format) \ printf("%s ...

  6. Linux makefile教程之条件判断六[转]

    使用条件判断 —————— 使用条件判断,可以让make根据运行时的不同情况选择不同的执行分支.条件表达式可以是比较变量的值,或是比较变量和常量的值. 一.示例 下面的例子,判断$(CC)变量是否“g ...

  7. Intent(意图)

    Intent的中文意思是“意图,目的”的意思,可以理解为不同组件之间通信的“媒介”或者“信使”. 目标组件一般要通过Intent来声明自己的条件,一般通过组件中的<intent-filter&g ...

  8. [再寄小读者之数学篇](2014-11-24 Abel 定理)

    设幂级数 $\dps{g(x)=\sum_{n=0}^\infty a_nx^n}$ 在 $|x|<1$ 内收敛, 且 $\dps{\sum_{n=0}^\infty a_n=s}$ 收敛. 则 ...

  9. Maps

    Maps.uniqueIndex()将列表转换为map  //iterator各个元素作为Map.values, key为Function.apply返回值 Maps.uniqueIndex(ps.i ...

  10. 传统IT大佬们，路在何方？

    [文/ 任英杰] 2014年第一季度季报陆续出台,互联网公司无疑仍是璀璨明星,一路凯歌,而与互联网企业的蒸蒸日上形成鲜明对照的是传统IT企业的集体黯然失色.分析一下传统IT大佬们发布的数据,用友营业收 ...