WebForm's repeater and JS light bar effects

Repeater:

HeaderTemplate-Execute again at load start

ItemTemplate-How many data are executed and how many times

FooterTemplate-executed at the end of the load

AlternatingItemTemplate-Alternating Item template

<asp:repeater id= "Repeater1" runat= "Server" >
<HeaderTemplate>
<table id= "TB1" >
<tr id= "Tr_head" >
<td> User name </td>
<td> Password </td>
<td> Nickname </td>
<td> Sex </td>
<td> Birthdays </td>
<td> Age </td>
<td> ethnic </td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class= "Tr_item" >
<td><% #Eval ("UserName")%></td>
<td><% #Eval ("PassWord")%></td>
<td><% #Eval ("nickname")%></td>
<td><% #Eval ("Sexstr")%></td>
<td><% #Eval ("Birthdaystr")%></td>
<td><% #Eval ("Age")%></td>
<td><% #Eval ("Nationname")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
This is a general notation, I do not use VS, in my database in the user table as an example, written in Notepad
Main labels on 3, head tag HeaderTemplate, item label ItemTemplate, Foot label FooterTemplate. As for AlternatingItemTemplate, there is no written
Why I did not write, because there is no need, if the alternatingitemtemplate tag is added, then the item label and the alternating item label will be output alternately in the Repeater, you can
By setting the style to achieve the beautification, in fact there is not much of a bird (at least now I think so).
As for the binding data source, the bindings for the list written on the previous WebForm's essay are roughly the same, slightly simpler, because only the Datesource is directed, and bind is bound to the line

Changes the style of a piece of data by determining whether a property value matches the criteria. They call this an inventory early warning system, because it's more common in stock alerts.

Property extension, write a property that returns a string type, and return a CSS style sheet style (and a way to function methods, however, hehe)
Code:
public string Red
{
Get
{
String end = "";
if (Convert.ToInt32 (age) >= 16)
{
end = "background-color:red;";
}
return end;
}
}
This is the code of the extended property in the attribute class, which returns a string type of HTTP code and then, very critical!
Style= "<% #Eval (" Red ")%>"
by <% #Eval%>, throw the string returned in the red extended property to the style, and you're done. The TR in the throw item label

To let you know, the attribute value does not have to be a display

Light Bar Effect:
This light bar effect, with JS write
<script type= "Text/javascript" >
Window.onload = function () {
var items = document.getelementsbyclassname ("Tr_item");
var oldcolor = "";
for (var i = 0; i < items.length; i++) {
Items[i].onmouseover = function () {
Oldcolor = This.style.backgroundColor;
This.style.backgroundColor = "Yellow";
};
Items[i].onmouseout = function () {
This.style.backgroundColor = Oldcolor;
};

}

};
</script>
The code is above and we analyze the logic below. What does the wand effect mean, you move the mouse up to change color, move it out and change it back, that's it.
In this case, we will have two events: mouse over onmouseover and mouse out of onmouseout, the code is not uppercase I do not write. Well, first, we have to get class.
For everything in the Tr_item, which is the data in the item tag. Then, we define a oldcolor to be empty and one to record the original color. Then we use the For loop
Attach all of the two events to the item label. I won't talk about the logic of the event.

-----------------------------------------------
Non-tabular information display:
1, Pure Html+css+js production

2. Add Repeater control to show data binding

WebForm's repeater and JS light bar effects