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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 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新手上路(六)
2006/10/09 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
javascript json 新手入门文档
2009/12/03 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
在Django中创建动态视图的教程
2015/07/15 Python
Python制作简单的网页爬虫
2015/11/22 Python
python迭代器与生成器详解
2016/03/10 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
材料采购员岗位职责
2013/12/17 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
教师个人事迹材料
2014/12/17 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
Java 在生活中的 10 大应用
2021/11/02 Java/Android
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android