这次给大家带来jquery实现表格隔行变色与鼠标滑过高亮（附代码），jquery实现表格隔行变色与鼠标滑过高亮的注意事项有哪些，下面就是实战案例，一起来看一下。
此插件旨在实现表格隔行变色，且鼠标移动在表格的某一行上时，该行能高亮显示。整体代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>表格隔行变色且鼠标滑过高亮显示</title>
<style>
table{border-collapse:collapse;border:none;width:20%;}
table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;}
.evenrow{background:#f0f0f0;}
.oddrow{background:#ff0;}
.activerow{background:#f00;color:#fff;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>
<body>
<script>
/*
* 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函数。
</script>
<table cellpadding="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操作对象数组元素方法总结（附案例）
grep()方法实现数组过滤筛选
以上就是jquery实现表格隔行变色与鼠标滑过高亮（附代码）的详细内容。