收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
积木学院 > 程序开发 > jQuery > 正文

JQuery操作表格(隔行着色,高亮显示,筛选数据)

来源:互联网 日期:2014-12-05 09:49
查了些资料,写了4个Demo:

1. 隔行着色
 
$('#table1 tr:odd').addClass('odd');
$('#table1 tr:even').addClass('even');

效果:

查看图片

2. 高亮含有特定数据的行

 
$("#table2 tr:contains('Fuck')").addClass("selected");

查看图片

3. 筛选数据

 
$("#filter").click(
function(){
$("#table3 .datarow").hide().filter(":contains('ABCDEFG')").show();
}
);

4. 根据用户输入,即时筛选数据
 
$("#keyword").keyup(function(){
$("#table3 .datarow").hide().filter(":contains('" + ($(this).val()) + "')").show();
}).keyup();

筛选前:

查看图片

输入ck:

查看图片

在线演示 http://demo.jb51.net/js/2012/JQueryTableExample/
打包下载 JQueryTableExample_Edi.rar

推荐阅读

 

热点信息

 
强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号