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 相关文章推荐
js实现适配不同的屏幕大小
Apr 10 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
JS实现轮播图效果
Jan 11 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
Antd的table组件表格的序号自增操作
Oct 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之PHP语法学习笔记1
2006/12/17 PHP
附件名前加网站名
2008/03/23 PHP
PHP教程 预定义变量
2009/10/23 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python实现超级马里奥
2020/03/18 Python
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
中国梦演讲稿教师篇
2014/04/23 职场文书
师德模范事迹材料
2014/06/03 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
政协常委会议主持词
2015/07/03 职场文书
导游词之杭州西湖
2019/09/19 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby