tab奇偶行颜色交替+插件 

(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="width: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>

 

posted on 2013-09-17 15:28  小V_chen  阅读(268)  评论(0)  编辑  收藏  举报

导航