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制作迷你背词汇工具
Jul 27 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
如何制作自己的原生JavaScript路由
May 05 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
global.php
2006/12/09 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
django实现后台显示媒体文件
2020/04/07 Python
Opencv求取连通区域重心实例
2020/06/04 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
医院节能减排方案
2014/06/13 职场文书
《小小的船》教学反思
2016/02/18 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python