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>