ASP. NET uses repeater to change the color of the table, the mouse color, and the effect of clicking the color.

ASP. NET uses repeater to change the color of the table, the mouse color, and the effect of clicking the color.

In this tutorial, ASP. NET is developed to bind a data list with the Repeater control. The effects of the Data list are as follows:

 

It's easy to achieve this. It's all entry-level. How can this problem be achieved?

The foreground. aspx content is as follows:

HTML codeHttp://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"> group ID </Th>

<TH style = "width: 120px"> group name

</Th>

<TH style = "width: 100px"> group superior ID

</Th>

<TH style = "width: 120px">

Serial number

</Th>

<TH style = "width: 80px"> Layers

</Th>

<TH style = "width: 160px">

Sub-group data

</Th>

<TH style = "width: 160px">

Flag

</Th>

</Tr>

</Headertemplate>

<Itemtemplate>

<Tr> <TD> <% # databinder. eval (container. dataitem, "groupid") %> </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>

The following is the key JS Code:

function SetTableColor(TableID) {

VaR clickclass = ""; // click the style name

VaR moveclass = ""; // The style name that passes the mouse

VaR clicktr = NULL; // click the row

VaR movetr = NULL; // move the cursor over the row

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

    }

// Set the Mouse Action event

    for (var i = 1; i < Ptr.length; i  ) {

        var Owner = Ptr[i].item;

// Move the cursor over the event

        Ptr[i].onmouseover = function Move() {

            if (clickTR != this) {

                if (moveTR != this) {

                    moveClass = this.className;

                    moveTR = this;

                    this.className = "Rep_Tr_Move";

                }

            }

        }

// Mouse exit event

        Ptr[i].onmouseout = function Out() {

            if (clickTR != this) {

                moveTR = null;

                this.className = moveClass;

            }

        }

// Click the event

        Ptr[i].onclick = function Ck() {

            if (clickTR != this) {

                if (clickTR) {

                    clickTR.className = clickClass;

                }

                clickTR = this;

                clickClass = moveClass;

            }

            this.className = "Rep_Tr_Click";

        }

    }

}

Next, let's take a look at the key code of the CSS style:

/* --------------- Internal table style definition of the Repeater control -----------------*/

/* Repeater internal table style */

.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;/* code of the fine-line table */

}

/* The TD style of the repeater internal table */

.Rep_tab td

{

Border: 1px solid #4d9ab0;/* line color of the line table */

    height: 25px;

}

/* Repeater internal table caption style */

.Rep_tab caption

{

    text-align: center;

    font-size: 12px;

    font-weight: bold;

    margin: 0 auto;

}

/* The odd row style of TR in the repeater internal table */

.Rep_Tab_OddTr

{

    background-color: #f8fbfc;

    color: #000000;

    height: 25px;

}

/* Repeater internal table tr's even row style */

.Rep_Tab_EvenTr

{

    background-color: #e5f1f4;

    color: #000000;

    height: 25px;

}

.Rep_Tab_HeaderTr

{

    background-color: #ffffee;

    color: #000000;

}

/* The color of the mouse */

.Rep_Tr_Move

{

    background-color: #ecfbd4;

    color: #000000;

    height: 25px;

}

/* The color of the mouse click */

.Rep_Tr_Click

{

    background-color: #bce774;

    color: #333333;

    height: 25px;

}

After completing the preceding code, add the following statement to the <body> of the. ASPX page:

<SCRIPT type = "text/JavaScript" Language = "JavaScript">

Window. onload = settablecolor ("tab"); </SCRIPT>

In this way, you can.