(function($){ $.fn.tableUI=function(options){ var defaults={ evenRowclass:"evenRow", oddrowclass:"oddRow", activeRowClass:"activeRow" } var options=$.extend(defaults,options); this.each(function(){ //each历编 thistable=$(this); thistable.find("tr:even").addClass(options.evenRowclass); thistable.find("tr:odd").addClass(options.oddrowclass); }); //鼠标经过，离开的tr的变化 thistable.find("tr").bind("mouseenter mouseleave",function(e){ $(this).toggleClass(options.activeRow); }); } })(jQuery);
上是tableUI.js
以下是html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="tableUI.js"></script> <script> $(document).ready(function (){ $('#tbl, #tbl2').tableUI(); }); </script> <style> .evenRow{background-color:#FFCCCC;} .oddRow{background-color:#CCCCCC;} .activeRow{background-color:#CCCCFF;} </style> </head> <body> <table id="tbl" style="400px;" border="5px"> <tr> <td><span style="border:1px solid red; display:block;">1111111111111</span></td> <td>1111111111111</td> </tr> <tr> <td>1111111111111</td> <td>1111111111111</td> </tr> <tr> <td>1111111111111</td> <td>1111111111111</td> </tr> <tr> <td>1111111111111</td> <td>1111111111111</td> </tr> </table> </body> </html>