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复制对象使用说明
Jun 28 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 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数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
发现的以前不知道的函数
2006/09/19 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
Django ORM多对多查询方法(自定义第三张表&ManyToManyField)
2019/08/09 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
个人生活学习自我评价范文
2013/11/26 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书