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

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.