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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
js验证密码强度解析
Mar 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
python修改注册表终止360进程实例
2014/10/13 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
python发送邮件脚本
2018/05/22 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
php优化查询foreach代码实例讲解
2021/03/24 PHP
幼师自荐信
2013/10/26 职场文书
平面设计师的工作职责
2013/11/21 职场文书
安全目标管理责任书
2014/07/25 职场文书
初中毕业生感言
2015/07/31 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
使用Redis实现实时排行榜功能
2021/07/02 Redis