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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
this和执行上下文实现代码
Jul 01 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
JS定义类的六种方式详解
May 12 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 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几个数学计算的内部函数学习整理
2011/08/06 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
Laravel5中contracts详解
2015/03/02 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
Python入门篇之数字
2014/10/20 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
群胜软件Java笔试题
2012/09/29 面试题
高三生物教学反思
2014/01/25 职场文书
安全环保标语
2014/06/09 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
诚实守信主题班会
2015/08/13 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android