JQuery操作表格(隔行着色,高亮显示,筛选数据)


Posted in Javascript onFebruary 23, 2012

查了些资料,写了4个Demo:

1. 隔行着色

$('#table1 tr:odd').addClass('odd'); 
$('#table1 tr:even').addClass('even');

效果:

JQuery操作表格(隔行着色,高亮显示,筛选数据)

2. 高亮含有特定数据的行

$("#table2 tr:contains('Fuck')").addClass("selected");

JQuery操作表格(隔行着色,高亮显示,筛选数据) 

3. 筛选数据

$("#filter").click( 
function(){ 
$("#table3 .datarow").hide().filter(":contains('ABCDEFG')").show(); 
} 
);

4. 根据用户输入,即时筛选数据
$("#keyword").keyup(function(){ 
$("#table3 .datarow").hide().filter(":contains('" + ($(this).val()) + "')").show(); 
}).keyup();

筛选前:

JQuery操作表格(隔行着色,高亮显示,筛选数据) 

输入ck:

JQuery操作表格(隔行着色,高亮显示,筛选数据)

在线演示 http://demo.3water.com/js/2012/JQueryTableExample/
打包下载 JQueryTableExample_Edi.rar

Javascript 相关文章推荐
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 #Javascript
js前台判断开始时间是否小于结束时间
Feb 23 #Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 #Javascript
JavaScript插入动态样式实现代码
Feb 22 #Javascript
javascript插入样式实现代码
Feb 22 #Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 #Javascript
JS对象与JSON格式数据相互转换
Feb 20 #Javascript
You might like
海贼王:最美的悬赏令!
2020/03/02 日漫
PHP 数据库树的遍历方法
2009/02/06 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
pandas 时间格式转换的实现
2019/07/06 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
python计算导数并绘图的实例
2020/02/29 Python
Python基于template实现字符串替换
2020/11/27 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
班组安全员工作职责
2014/02/01 职场文书
经典洗发水广告词
2014/03/13 职场文书
战略合作意向书范本
2014/04/01 职场文书
二年级小学生评语
2014/04/21 职场文书
学习型班组申报材料
2014/05/31 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang