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 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
JS伪继承prototype实现方法示例
Jun 20 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 simplexml_load_string()函数实例讲解
2019/02/03 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
python之Character string(实例讲解)
2017/09/25 Python
Sanic框架Cookies操作示例
2018/07/17 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python 如何创建一个线程池
2020/07/28 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
监理员的岗位职责
2013/11/13 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
大学生活感想
2015/08/10 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android