jQuery插件开发基础教程之Table隔行换色

最新推荐文章于 2024-09-08 21:17:37 发布

子未

最新推荐文章于 2024-09-08 21:17:37 发布

阅读量424

点赞数

分类专栏： jQuery 文章标签： jquery javascript jquery插件

本文链接：https://blog.csdn.net/l76422937/article/details/41870143

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML调用Demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.evenRow{background-color: #52C3DD;}
			.oddRow{background-color: #EBE6AF;}
			.activeRow{background-color: #95BE02;}
		</style>
	</head>
	<body>
		<table border="0" cellpadding="1" cellspacing="2" width="100%">
			<tr>
				<td>第一行</td>
				<td>第一行</td>
				<td>第一行</td>
				<td>第一行</td>
				<td>第一行</td>
				<td>第一行</td>
				<td>第一行</td>
				<td>第一行</td>
				<td>第一行</td>
				<td>第一行</td>
				<td>第一行</td>
				<td>第一行</td>
			</tr>
			<tr>
				<td>第二行</td>
				<td>第二行</td>
				<td>第二行</td>
				<td>第二行</td>
				<td>第二行</td>
				<td>第二行</td>
				<td>第二行</td>
				<td>第二行</td>
				<td>第二行</td>
				<td>第二行</td>
				<td>第二行</td>
				<td>第二行</td>
			</tr>
			<tr>
				<td>第三行</td>
				<td>第三行</td>
				<td>第三行</td>
				<td>第三行</td>
				<td>第三行</td>
				<td>第三行</td>
				<td>第三行</td>
				<td>第三行</td>
				<td>第三行</td>
				<td>第三行</td>
				<td>第三行</td>
				<td>第三行</td>
			</tr>
			<tr>
				<td>第四行</td>
				<td>第四行</td>
				<td>第四行</td>
				<td>第四行</td>
				<td>第四行</td>
				<td>第四行</td>
				<td>第四行</td>
				<td>第四行</td>
				<td>第四行</td>
				<td>第四行</td>
				<td>第四行</td>
				<td>第四行</td>
			</tr>
		</table>
	</body>

	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/jquery.test-1.0.0.js"></script>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			$("table").test();
		});
	</script>
</html>

jQuery代码

/**
 * Test 1.0.0
 * (c) Copyright 2014 Liu. All Rights Reserved.
 * 2014-09-01
 * 对表格的测试和学习
 * 
 * 插件基础通用框架
 *	(function($) {
 *		// 声明函数 test()
 *	 	$.fn.test = function(options) {
 *		 	// 定义插件的属性和方法
 *
 *			// 合并参数
 *		  	var options = $.extend(defaults, options);
 *
 *			// 插件实现方法
 *		 	this.each(function() {
 *			 	// 插件实现代码
 *		   	});
 *	     };
 *	})(jQuery);
 */
(function($) {
	// 声明函数 test()
	$.fn.test = function(options) {

		// 定义默认参数
		var defaults = {
			evenRowClass: "evenRow",
			oddRowClass: "oddRow",
			activeRowClass: "activeRow"
		};

		// 合并参数
		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).addClass(options.activeRowClass);
			});

			// 鼠标移出取消换色
			$(thisTable).find("tr").bind("mouseout", function() {
				$(this).removeClass(options.activeRowClass);
			});
		});
	};
})(jQuery);

子未

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件开发基础教程之Table隔行换色

HTML调用Demo .evenRow{background-color: #52C3DD;} .oddRow{background-color: #EBE6AF;} .activeRow{background-color: #95BE02;} 第一行第一行第一行第一行第一行
复制链接

扫一扫

专栏目录