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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 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处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
Python实现的随机森林算法与简单总结
2018/01/30 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Django的Modelforms用法简介
2019/07/27 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
Shell如何接收变量输入
2012/09/24 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
文秘自荐信
2013/10/20 职场文书
留学推荐信写作指南
2014/01/25 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
鉴史问廉观后感
2015/06/10 职场文书
婚育证明样本
2015/06/16 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python