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 继承详解(三)
Jul 13 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 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-Java-Bridge使用笔记
2014/09/22 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
javascript动态加载二
2012/08/22 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
python实现文件快照加密保护的方法
2015/06/30 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Flask处理Web表单的实现方法
2021/01/31 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
应征英语教师求职信
2013/11/27 职场文书
车间调度岗位职责
2013/11/30 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
岗位职责风险点
2014/03/12 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技