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


查了些资料,写了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.phpstudy.net/js/2012/JQueryTableExample/
打包下载 JQueryTableExample_Edi.rar



相关阅读:
asp.net TemplateField模板中的Bind方法和Eval方法
初次远程做Linux Iptables规则注意事项
Linux中find和perl方法实现文件内容替换
用js模拟JQuery的show与hide动画函数代码
重装XP,恢复对Linux的引导
Php Ctemplate引擎开发相关内容
php中经典方法实现判断多维数组是否为空
服务器日志节省空间的高效率方法
Google Voice 短信发送接口PHP开源版(2010.5更新)
ARP欺骗攻击原理深入说明分析
CSS制作细框表格
Linux系统网络配置详解
一个ftp类(ini.php)
Eclipse插件开发之新手入门
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4