Repeater控件中的模板有五種
HeaderTemplate:頭部模板
FooterTemplate:尾部模板
ItemTemplate:元素模板
AlternatingItemTemplate:交替元素模板
SeperatorTemplate:分隔模板
不復制代碼給妳看妳是不會明白滴,請看大屏幕:
使用Repeater生成表格,交替行使用不同的顏色:
<asp:Repeater?ID="Repeater1"?runat="server"><HeaderTemplate><!--header不會重復-->
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Company</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate><!--模板是重復滴-->
<tr?class="white">
<td><%#Eval("name")?%></td>
<td><%#Eval("gender")?%></td>
<td><%#Eval("age")?%></td>
<td><%#Eval("company")?%></td>
<td><%#Eval("Phone")?%></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate><!--顧名思義:交替行和上面的ItemTemplate交替出現-->
<tr?class="bisque">
<td><%#Eval("name")?%></td>
<td><%#Eval("gender")?%></td>
<td><%#Eval("age")?%></td>
<td><%#Eval("company")?%></td>
<td><%#Eval("Phone")?%></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate><!--footer不會重復-->
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
普通模板和交替模板中的行用css控制,顯示不同的顏色,懸浮變色也是css的偽類實現。
table?tr.white?{background-color:?white;
}
table?tr.bisque?{
background-color:?bisque;
}
table?tbody?tr:hover?{
background-color:?#eee;
}
以上給出的不是全部代碼,數據怎樣綁定,表格的字體、高度、邊框相信樓主自己會搞定吧?
這是運行過後的截圖,還滿意吧?
有壹行是灰色的,因為鼠標懸停在上面,但是鼠標不出現在截圖中。這壹行的顏色本身是白色的,希望不會給樓主帶來困擾。