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代码
Nov 09 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
详解基于webpack&gettext的前端多语言方案
Jan 29 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
关于Js中new操作符的作用详解
Feb 21 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
使用python实现rsa算法代码
2016/02/17 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Python实现像awk一样分割字符串
2020/09/15 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
小学生班会演讲稿
2014/01/09 职场文书
医疗纠纷协议书
2014/04/16 职场文书
微笑服务演讲稿
2014/05/13 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
同学毕业留言寄语
2015/02/27 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
Android实现图片九宫格
2022/06/28 Java/Android