JQuery表格内容过滤的实现方法


Posted in Javascript onJuly 05, 2013
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JQuery表格内容过滤</title> 
<style type="text/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;} 
</style> 
<!--   引入jQuery --> 
<script src="jquery-1.5.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
  $(function(){ 
       $("#filterName").keyup(function(){ 
          $("table tbody tr") 
                    .hide() 
                    .filter(":contains('"+( $(this).val() )+"')") 
                    .show(); 
       }).keyup(); 
  }) 
</script> 
</head> 
<body> 
    <div> <br/> 筛选: <input id="filterName" name="filterName" /> <br/> </div> 
    <table> 
        <thead> 
            <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> 
        </thead> 
        <tbody> 
            <tr><td>SYJ</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>张三</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>二蛋</td><td>男</td><td>东北辽宁省</td></tr> 
        </tbody> 
    </table> 
</body> 
</html>
Javascript 相关文章推荐
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
Javasript设计模式之链式调用详解
Apr 26 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
express express-session的使用小结
Dec 12 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 #Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 #Javascript
javascript实现跳转菜单的具体方法
Jul 05 #Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 #Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 #Javascript
JS 精确统计网站访问量的实例代码
Jul 05 #Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python OS模块常用函数说明
2015/05/23 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python实现函数极小值
2019/07/10 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
房屋出售协议书
2014/04/10 职场文书
大学生交通专业求职信
2014/09/01 职场文书
七年级数学教学反思
2016/02/17 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers