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.