隔行一色鼠标移动变色

<%@ 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 style="width: 80%">
                </div>
                </div>
            </ContentTemplate>
    </div>
<script type="text/javascript" language="javascript">
    window.onload = SetTableColor("Tab");
</script>
</asp:Content>

 

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";
        }
    }
}

 

/*-----------------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;
}