html代码<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loo
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>Insert title here</title><script type=text/javascript src="../../jquery-1.3.1.js"></script><script type=text/javascript src="demo.js"></script><script> $(function(){ $('#table').tab();});</script><style> .even{background-color:#ffff00;} .odd{background-color:#0000ff;} .current{background-color:#000000;}</style></head><body><table width="200" border="1" id="table"> <tr> <td>fgdgfd</td> <td>dfgdfg</td> </tr> <tr> <td>dgfdgfd</td> <td>gdgdfgd</td> </tr></table></body></html>插件代码://jquery 插件(function($){ $.fn.tab=function(options){ var defaults={ //各种参数 evenRowClass:'even', oddRowClass:'odd', currentRowClass:'current', eventType1:'mouseover', eventType2:'mouseout' } //将default的参数整合至对象里 var options=$.extend(defaults,options); this.each(function(){ //实现功能代码 $(this).find('tr:even').addClass(options.evenRowClass); $(this).find('tr:odd').addClass(options.oddRowClass); //鼠标的移入和移出 /*$(this).find('tr').mouseover(function(){ $(this).addClass(options.currentRowClass); }); $(this).find('tr').mouseout(function(){ $(this).removeClass(options.currentRowClass); });*/ $(this).find('tr').bind(options.eventType1,function(){ $(this).addClass(options.currentRowClass); }); $(this).find('tr').bind(options.eventType2,function(){ $(this).removeClass(options.currentRowClass); }); }); }})(jQuery);
