JQUERY---插件
<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 >女友三围</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);