jquery实现隔行换色特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery实现隔行换色特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery实现隔行换色特效代码</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.tableui.js"></script>
<link href='css/jquery.tableui.css'  rel="stylesheet" type="text/css"/>
<script type="text/javascript">
	$(function(){
		$(".table_solid").tableUI();
	});
</script>
</head>
<body>
	<table class="table_solid" border="0" cellspacing="0">
		<tr><th>id</th><th>name</th><th>ms</th></tr>
		<tr><td>1</td><td>a1</td><td>jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。</td></tr>
		<tr><td>2</td><td>a2</td><td>jQuery是一个兼容多浏览器的javascript框架</td></tr>
		<tr><td>3</td><td>a3</td><td>jQuery在2006年1月由美国人John Resig在纽约的barcamp发布</td></tr>
		<tr><td>4</td><td>a4</td><td>jQuery的语法设计可以使开发者更加便捷</td></tr>
        <tr><td>5</td><td>a5</td><td>jQuery提供API让开发者编写插件</td></tr>
		<tr><td>6</td><td>a6</td><td>使用jQuery.Deferred还可以开发自己的延迟对象</td></tr>
		<tr><td>7</td><td>a7</td><td>提升了事件委派时的性能有了大幅度的提升，尤其是在IE7下</td></tr>
		<tr><td>8</td><td>a8</td><td>jQuery 1.7.1不能正确地设置IE7中克隆元素的tabindex属性</td></tr>
	</table>
</body>
</html>

JS代码(jquery.tableui.js):

/* * tableUI 0.1 * Date:2014-10-16 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示 */
(function($){
	$.fn.tableUI = function(options){
	var defaults ={
	evenRowClass:"evenRow",oddRowClass:"oddRow",activeRowClass:"activeRow",clickRowClass:"clickRow"}
var options = $.extend(defaults,options);
	this.each(function(){
	var thisTable = $(this);
	$(thisTable).find("tr:even").addClass(options.evenRowClass);
	$(thisTable).find("tr:odd").addClass(options.oddRowClass);
	$(thisTable).find("tr").bind("mouseover",function(){
	$(this).removeClass(options.clickRowClass).addClass(options.activeRowClass);
}
);
	$(thisTable).find("tr").bind("mouseout",function(){
	$(this).removeClass(options.clickRowClass).removeClass(options.activeRowClass);
}
);
	$(thisTable).find("tr").bind("click",function(){
	$(this).addClass(options.clickRowClass);
}
);
}
);
}
;
}
)(jQuery);

CSS代码(jquery.tableui.css):

.evenRow{background-color:#F7FDEA;}
.oddRow{background-color:#FFFFFF;}
.activeRow{background-color:#FFFF99;}
.clickRow{background-color:#CCCCFF;}
*{margin:0;padding:0;}
body{background:#f9f9f9;color:#000;text-shadow:1px 2px 1px #FFFFFF;font-family:"微软雅黑";font-size:14px;}
.table_solid{border-bottom:1px solid #CCCCCC;border-right:1px solid #CCCCCC;position:relative;width:600px;margin:20px auto;text-align:center;}
.table_solid th,.table_solid td{border-left:1px solid #CCCCCC;border-top:1px solid #CCCCCC;color:#333333;padding:0.5em;}
.table_solid th{background-color:#DFF9FF;}

附件:下载该文件资源,减少时间成本(增值服务)