<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);