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 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php创建多级目录代码
2008/06/05 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
jQuery中parents()方法用法实例
2015/01/07 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
python3判断IP地址的方法
2021/03/04 Python
国际花店:Pickup Flowers
2020/04/10 全球购物
国贸专业自荐信范文
2014/03/02 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
工作说明书格式
2014/07/29 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python
Spring中bean集合注入的方法详解
2022/07/07 Java/Android