ASP.NET使用Repeater做Table交替行變色、滑鼠經過變色及單擊變色效果

ASP.NET使用Repeater做Table交替行變色、滑鼠經過變色及單擊變色效果

本文教程是ASP.NET開發使用Repeater控制項綁定資料列表，資料列表要做出的效果如Table交替行顏色、滑鼠經過顏色、單擊顏色,效果如下：

 

要實現這個效果很簡單，都是入門級的吧。下面看下是如何?的？

前台.ASPX內容如下

HTML Code [http://www.xueit.com] 

<%@ 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>

下面是JS關鍵代碼：

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樣式關鍵代碼：

/*-----------------重複器控制項內部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;

}

做好以上代碼後，之後在.ASPX頁面內容的<body>上加如下語句：

<script type="text/javascript"language="javascript">

window.onload =SetTableColor("Tab");</script>

這樣就可以了。