Table交替行变色 鼠标经过变色 单击变色

最近做项目用到Repeater,没有好的样式只能套一个Table来设置交替行颜色、鼠标经过颜色、单击颜色，网上艘了一下资料整理了一下，具体的效果如下，

　　前台的Html代码如下：

 

　　 代码

   
   

    
    
    
    <%
    
    @ Page Title
    
    =
    
    ""
    
     Language
    
    =
    
    "
    
    C#
    
    "
    
     MasterPageFile
    
    =
    
    "
    
    ~/SystemBase/MainMasterPage.master
    
    "
    
    
    AutoEventWireup
    
    =
    
    "
    
    true
    
    "
    
     CodeFile
    
    =
    
    "
    
    Spreater.aspx.cs
    
    "
    
     Inherits
    
    =
    
    "
    
    Spreater
    
    "
    
     
    
    %>
    
     
    
     
    
    

    
    <
    
    asp:Content ID
    
    =
    
    "
    
    Content1
    
    "
    
     ContentPlaceHolderID
    
    =
    
    "
    
    ContentPlaceHolder1
    
    "
    
     runat
    
    =
    
    "
    
    Server
    
    "
    
    >
    
    
    
    
    <
    
    script src
    
    =
    
    "
    
    App_Js/JSCommon.js
    
    "
    
     type
    
    =
    
    "
    
    text/javascript
    
    "
    
    >
    
    
    
    
    </
    
    script
    
    >
    
    
    
    
    <
    
    div style
    
    =
    
    "
    
    width: 800px
    
    "
    
    >
    
     
    
    
            
    
    <
    
    ContentTemplate
    
    >
    
    
                
    
    <
    
    asp:Repeater ID
    
    =
    
    "
    
    Rep
    
    "
    
     runat
    
    =
    
    "
    
    server
    
    "
    
    >
    
    
                    
    
    <
    
    HeaderTemplate
    
    >
    
    
                        
    
    <
    
    table id
    
    =
    
    "
    
    Tab
    
    "
    
     
    
    class
    
    =
    
    "
    
    Rep_tab
    
    "
    
    >
    
    
                            
    
    <
    
    tr
    
    >
    
    
                                
    
    <
    
    th style
    
    =
    
    "
    
    width: 120px
    
    "
    
    >
    
    组编号
    
    </
    
    th
    
    >
    
    
                                
    
    <
    
    th style
    
    =
    
    "
    
    width: 120px
    
    "
    
    >
    
    组名称
    
    </
    
    th
    
    >
    
    
                                
    
    <
    
    th style
    
    =
    
    "
    
    width: 100px
    
    "
    
    >
    
    组上级编号
    
    </
    
    th
    
    >
    
    
                                
    
    <
    
    th style
    
    =
    
    "
    
    width: 120px
    
    "
    
    >
    
    序号
    
    </
    
    th
    
    >
    
    
                                
    
    <
    
    th style
    
    =
    
    "
    
    width: 80px
    
    "
    
    >
    
    层次
    
    </
    
    th
    
    >
    
    
                                
    
    <
    
    th style
    
    =
    
    "
    
    width: 160px
    
    "
    
    >
    
    子组数据
    
    </
    
    th
    
    >
    
    
                                
    
    <
    
    th style
    
    =
    
    "
    
    width: 160px
    
    "
    
    >
    
    标志
    
    </
    
    th
    
    >
    
    
                            
    
    </
    
    tr
    
    >
    
    
                    
    
    </
    
    HeaderTemplate
    
    >
    
    
                    
    
    <
    
    ItemTemplate
    
    >
    
    
                        
    
    <
    
    tr
    
    >
    
    
                            
    
    <
    
    td
    
    ><%
    
    #DataBinder.Eval(Container.DataItem, 
    
    "
    
    GroupID
    
    "
    
    )
    
    %></
    
    td
    
    >
    
    
                            
    
    <
    
    td
    
    ><%
    
    #DataBinder.Eval(Container.DataItem, 
    
    "
    
    G_CName
    
    "
    
    )
    
    %></
    
    td
    
    >
    
    
                            
    
    <
    
    td
    
    ><%
    
    #DataBinder.Eval(Container.DataItem, 
    
    "
    
    G_ParentID
    
    "
    
    )
    
    %></
    
    td
    
    >
    
    
                            
    
    <
    
    td
    
    ><%
    
    #DataBinder.Eval(Container.DataItem, 
    
    "
    
    G_ShowOrder
    
    "
    
    )
    
    %></
    
    td
    
    >
    
    
                            
    
    <
    
    td
    
    ><%
    
    #DataBinder.Eval(Container.DataItem, 
    
    "
    
    G_Level
    
    "
    
    )
    
    %></
    
    td
    
    >
    
    
                            
    
    <
    
    td
    
    ><%
    
    #DataBinder.Eval(Container.DataItem, 
    
    "
    
    G_ChildCount
    
    "
    
    )
    
    %></
    
    td
    
    >
    
    
                            
    
    <
    
    td
    
    >
    
     
    
    <%
    
    #DataBinder.Eval(Container.DataItem, 
    
    "
    
    G_Delete
    
    "
    
    )
    
    %></
    
    td
    
    >
    
    
                        
    
    </
    
    tr
    
    >
    
    
                    
    
    </
    
    ItemTemplate
    
    >
    
    
                    
    
    <
    
    FooterTemplate
    
    >
    
    
                    
    
    </
    
    table
    
    >
    
    
                    
    
    </
    
    FooterTemplate
    
    >
    
    
                
    
    </
    
    asp:Repeater
    
    >
    
     
    
    
                
    
    </
    
    div
    
    >
    
    
                
    
    </
    
    div
    
    >
    
    
            
    
    </
    
    ContentTemplate
    
    >
    
     
    
    
    
    
    </
    
    div
    
    >
    
    
    
    
    <
    
    script type
    
    =
    
    "
    
    text/javascript
    
    "
    
     language
    
    =
    
    "
    
    javascript
    
    "
    
    >
    
    
        window.onload 
    
    =
    
     SetTableColor(
    
    "
    
    Tab
    
    "
    
    );
    
    
    </
    
    script
    
    >
    
    

    
    </
    
    asp:Content
    
    >
    
    

   
   

 

 

　　JavaScript代码如下：

　　 代码

   
   

    
    
    
    function
    
     SetTableColor(TableID) {
    
    
    var
    
     clickClass 
    
    =
    
     
    
    ""
    
    ;        
    
    //
    
    点击样式名
    
    

    
        
    
    var
    
     moveClass 
    
    =
    
     
    
    ""
    
    ;         
    
    //
    
    鼠标经过样式名
    
    

    
        
    
    var
    
     clickTR 
    
    =
    
     
    
    null
    
    ;         
    
    //
    
    点击的行
    
    

    
        
    
    var
    
     moveTR 
    
    =
    
     
    
    null
    
    ;          
    
    //
    
    鼠标经过行
    
    

    
        
    
    var
    
     Ptr 
    
    =
    
     document.getElementById(TableID).getElementsByTagName(
    
    "
    
    tr
    
    "
    
    );
    
    
    for
    
     (i 
    
    =
    
     
    
    1
    
    ; i 
    
    <
    
     Ptr.length 
    
    +
    
     
    
    1
    
    ; i
    
    ++
    
    ) {
        Ptr[i 
    
    -
    
     
    
    1
    
    ].className 
    
    =
    
     (i 
    
    %
    
     
    
    2
    
     
    
    >
    
     
    
    0
    
    ) 
    
    ?
    
     
    
    "
    
    Rep_Tab_EvenTr
    
    "
    
     : 
    
    "
    
    Rep_Tab_OddTr
    
    "
    
    ;
    }
    
    
    //
    
    设置鼠标的动作事件
    
    

    
        
    
    for
    
     (
    
    var
    
     i 
    
    =
    
     
    
    1
    
    ; i 
    
    <
    
     Ptr.length; i
    
    ++
    
    ) {
        
    
    var
    
     Owner 
    
    =
    
     Ptr[i].item;
        
    
    //
    
    鼠标经过事件
    
    

    
            Ptr[i].onmouseover 
    
    =
    
     
    
    function
    
     Move() {
            
    
    if
    
     (clickTR 
    
    !=
    
     
    
    this
    
    ) {
                
    
    if
    
     (moveTR 
    
    !=
    
     
    
    this
    
    ) {
                    moveClass 
    
    =
    
     
    
    this
    
    .className;
                    moveTR 
    
    =
    
     
    
    this
    
    ;
                    
    
    this
    
    .className 
    
    =
    
     
    
    "
    
    Rep_Tr_Move
    
    "
    
    ;
                }
            }
        }
        
    
    //
    
    鼠标离开事件
    
    

    
            Ptr[i].onmouseout 
    
    =
    
     
    
    function
    
     Out() {
            
    
    if
    
     (clickTR 
    
    !=
    
     
    
    this
    
    ) {
                moveTR 
    
    =
    
     
    
    null
    
    ;
                
    
    this
    
    .className 
    
    =
    
     moveClass;
            }
        }
        
    
    //
    
    鼠标单击事件
    
    

    
            Ptr[i].onclick 
    
    =
    
     
    
    function
    
     Ck() {
            
    
    if
    
     (clickTR 
    
    !=
    
     
    
    this
    
    ) {
                
    
    if
    
     (clickTR) {
                    clickTR.className 
    
    =
    
     clickClass;
                }
                clickTR 
    
    =
    
     
    
    this
    
    ;
                clickClass 
    
    =
    
     moveClass;
            }
            
    
    this
    
    .className 
    
    =
    
     
    
    "
    
    Rep_Tr_Click
    
    "
    
    ;
        }
    }
}  
   
   

　　CSS样式代码如下：

　　 代码

   
   

    
    
    
    

    
    /*
    
    -----------------Repeater 控件内部Table样式定义-----------------
    
    */
    
    

    
    /*
    
    　Repeater内部Table的样式 
    
    */
    
    
.Rep_tab

    
    {
    
    
    width
    
    :
    
     100%
    
    ;
    
    
    margin
    
    :
    
     0px auto
    
    ;
    
    
    font
    
    :
    
     Georgia 11px
    
    ;
    
    
    font-size
    
    :
    
     12px
    
    ;
    
    
    font-family
    
    :
    
     Tahoma, Arial, Helvetica, Sans-serif, "宋体"
    
    ;
    
    
    color
    
    :
    
     #333333
    
    ;
    
    
    text-align
    
    :
    
     center
    
    ;
    
    
    vertical-align
    
    :
    
    middle
    
    ;
    
    
    border-collapse
    
    :
    
     collapse
    
    ;
    
     
    
    /*
    
    细线表格代码
    
    */
    
    
    

    
    }
    
    

    
    /*
    
    　Repeater内部Table的td样式 
    
    */
    
    
.Rep_tab td

    
    {
    
    
    border
    
    :
    
    1px solid #4d9ab0
    
    ;
    
     
    
    /*
    
    细线表格线条颜色
    
    */
    
    
    height
    
    :
    
     25px
    
    ;
    
    

    
    }
    
    

    
    /*
    
    　Repeater内部Table的caption样式 
    
    */
    
    
.Rep_tab caption

    
    {
    
    
    text-align
    
    :
    
     center
    
    ;
    
    
    font-size
    
    :
    
     12px
    
    ;
    
    
    font-weight
    
    :
    
     bold
    
    ;
    
    
    margin
    
    :
    
     0 auto
    
    ;
    
    

    
    }
    
    

    
    /*
    
    　Repeater内部Table的TR的奇数行样式 
    
    */
    
    
.Rep_Tab_OddTr

    
    {
    
    
    background-color
    
    :
    
     #f8fbfc
    
    ;
    
    
    color
    
    :
    
     #000000
    
    ;
    
    
    height
    
    :
    
     25px
    
    ;
    
    
     

    
    }
    
    

    
    /*
    
    　Repeater内部Table的TR的偶数行样式 
    
    */
    
    
.Rep_Tab_EvenTr

    
    {
    
    
    background-color
    
    :
    
     #e5f1f4
    
    ;
    
    
    color
    
    :
    
     #000000
    
    ;
    
    
    height
    
    :
    
     25px
    
    ;
    
    

    
    }
    
    
.Rep_Tab_HeaderTr

    
    {
    
    
    background-color
    
    :
    
     #ffffee
    
    ;
    
    
    color
    
    :
    
     #000000
    
    ;
    
    

    
    }
    
    

    
    /*
    
    鼠标经过的颜色
    
    */
    
    
.Rep_Tr_Move

    
    {
    
    
    background-color
    
    :
    
     #ecfbd4
    
    ;
    
    
    color
    
    :
    
     #000000
    
    ;
    
    
    height
    
    :
    
     25px
    
    ;
    
    

    
    }
    
    

    
    /*
    
     鼠标点击的颜色
    
    */
    
    
.Rep_Tr_Click

    
    {
    
    
    background-color
    
    :
    
     #bce774
    
    ;
    
    
    color
    
    :
    
     #333333
    
    ;
    
    
    height
    
    :
    
     25px
    
    ;
    
    

    
    }
    
    


   
   

　　注意：

　　在界面内添加JS和CSS的引用，记得是在你的Table的后面，添加如下代码：

  
  

   
   
   
   　　<
   
   script type
   
   =
   
   "
   
   text/javascript
   
   "
   
    language
   
   =
   
   "
   
   javascript
   
   "
   
   >
   
   
    　　window.onload 
   
   =
   
    SetTableColor(
   
   "
   
   Tab
   
   "
   
   );

   
   　　<
   
   /
   
   script>