jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法。分享给大家供大家参考，具体如下：
此插件旨在实现表格隔行变色，且鼠标移动在表格的某一行上时，该行能高亮显示。整体代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>表格隔行变色且鼠标滑过高亮显示</title>
<style>
table{border-collapse:collapse;border:none;width:20%;}
tabletrtd{border:1pxsolid#ccc;text-align:center;cursor:pointer;}
.evenRow{background:#f0f0f0;}
.oddRow{background:#ff0;}
.activeRow{background:#f00;color:#fff;}
</style>
<scripttype="text/javascript"src="jquery-1.7.1.js"></script>
</head>
<body>
<script>
/*
*tableUI0.1
*使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示
*Dependencejquery-1.7.1.js
*/
;(function($){
$.fn.tableUI=function(options){//经常用options表示有许多个参数
//各种属性、参数创建一些默认值，拓展任何被提供的选项
vardefaults={
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
};
varobj=$.extend(defaults,options);
this.each(function(){//this关键字代表了这个插件将要执行的jQuery对象此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。$(this)等同于$($('#element'));
//插件实现代码
varthisTable=$(this);//获取当前对象此时this关键字代表一个DOM元素我们可以alert打印出此时的this代表的是objectHTMLTableElement
//添加奇偶行颜色
$(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函数。
</script>
<tablecellpadding="0"cellspacing="0">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
$(function(){
$("table").tableUI();
})
</script>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。