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 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
基于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
PHP print类函数使用总结
2010/06/25 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
js静态作用域的功能。
2006/12/25 Javascript
js 图片轮播(5张图片)
2008/12/30 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
python 容器总结整理
2017/04/04 Python
Django自定义认证方式用法示例
2017/06/23 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python 同时读取多个文件的例子
2019/07/16 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
运动会解说词200字
2014/02/06 职场文书
人事专员职责
2014/02/22 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
2014财务年终工作总结
2014/12/08 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
书法社团活动总结
2015/05/07 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
Python Django项目和应用的创建详解
2021/11/27 Python