jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码_jquery

此插件旨在实现表格隔行变色，且鼠标移动在表格的某一行上时，该行能高亮显示。整体代码如下：

/*
* tableUI 0.1
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示
* Dependence jquery-1.7.1.js
*/ 
;(function($){
 $.fn.tableUI = function(options){ //经常用options表示有许多个参数 
 //各种属性、参数 创建一些默认值，拓展任何被提供的选项
 var defaults = {
 evenRowClass:"evenRow",
 oddRowClass:"oddRow",
 activeRowClass:"activeRow" 
 };
 var obj = $.extend(defaults,options);
 this.each(function(){ //this关键字代表了这个插件将要执行的jQuery对象 此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。 $(this)等同于 $($('#element'));
 //插件实现代码
 var thisTable = $(this); //获取当前对象 此时this关键字代表一个DOM元素 我们可以alert打印出此时的this代表的是object HTMLTableElement
 //添加奇偶行颜色
 $(thisTable).find("tr:even").addClass(obj.evenRowClass);
 $(thisTable).find("tr:odd").addClass(obj.oddRowClass);
 //添加活动行颜色
 $(thisTable).find("tr").mouseover(function(){
 $(this).addClass(obj.activeRowClass);
 });
 $(thisTable).find("tr").mouseout(function(){
 $(this).removeClass(obj.activeRowClass);
 });
 });
 };
})(jQuery);
//在这个封闭程序中，我们可以无的使用$符号来表示jQuery函数。


 
1
2
3
 
1
2
3
 
1
2
3
 
1
2
3
 
1
2
3

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。