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 相关文章推荐
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
详解在React里使用"Vuex"
Apr 02 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
基于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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
js 通用订单代码
2013/12/23 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python中sets模块的用法实例
2014/09/30 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python实现随机漫步方法和原理
2019/06/10 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
好矿嫂事迹材料
2014/01/21 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
公司庆典主持词
2015/07/04 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
基于Python实现流星雨效果的绘制
2022/03/18 Python
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技