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 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python计算两个地址之间的距离方法
2018/06/09 Python
python监控文件并且发送告警邮件
2018/06/21 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python向excel中写入数据的方法
2019/05/05 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
印度低票价航空公司:GoAir
2017/10/11 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
运动会拉拉队口号
2014/06/09 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2015感人爱情寄语
2015/02/26 职场文书
通知的格式范文
2015/04/27 职场文书