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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
vue vant中picker组件的使用
Nov 03 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
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
javascript 打印页面代码
2009/03/24 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python实现按关键字筛选日志文件
2019/12/24 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
教师实习期自我鉴定
2013/10/06 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
sql注入教程之类型以及提交注入
2021/08/02 MySQL