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 相关文章推荐
node.js中的console.error方法使用说明
Dec 10 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
Vue基础配置讲解
Nov 29 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 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中的cookie不用刷新就生效的方法
2012/02/04 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php中file_exists函数使用详解
2015/05/08 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
python获取标准北京时间的方法
2015/03/24 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
python中数据库like模糊查询方式
2020/03/02 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
python实现定时发送邮件
2020/12/23 Python
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
药品采购员岗位职责
2014/02/08 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
教师见习报告范文
2014/11/03 职场文书
2014年变电站工作总结
2014/12/19 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
理解python中装饰器的作用
2021/07/21 Python