JQUERY---插件

最新推荐文章于 2025-12-03 13:04:04 发布

最新推荐文章于 2025-12-03 13:04:04 发布 · 98 阅读

文章标签：

#javascript #xhtml #ViewUI

客户端技术---JS---JQUERY 专栏收录该内容

25 篇文章

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>1-1</title>
<script src="./jquery-1.4.2.js" type="text/javascript"></script>
<script src="./jquery.tableui.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".table_solid").tableUI();
	})
</script>
<style>
.oddRow{background-color:#FFDE73;}
.evenRow{background-color:#f0f0f0;}
.activeRow{background-color:#0162FA;}
</style>
</head>
<body>
<table class="table_solid">
		<tr>
			<th>女友姓名</th>
			<th width="185px" >女友三围</th>
			<th width="85px" >安全期</th>
			<th width="185px">标签</th>
			<th width="175px">操作</th>
		</tr>
		<tr>
			<th>第一列</th>
			<th width="185px" >第二列</th>
			<th width="85px" >第三列</th>
			<th width="185px">标签</th>
			<th width="175px">操作</th>
		</tr>
		<tr>
			<th>第一列</th>
			<th width="185px" >第二列</th>
			<th width="85px" >第三列</th>
			<th width="185px">标签</th>
			<th width="175px">操作</th>
		</tr>
		<tr>
			<th>第一列</th>
			<th width="185px" >第二列</th>
			<th width="85px" >第三列</th>
			<th width="185px">标签</th>
			<th width="175px">操作</th>
		</tr>
</table>		
</body>
</html>

jquery.tableui.js

/*
 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示
 */
(function($){
	$.fn.tableUI = 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);