當前位置:編程學習大全網 - 源碼破解 - asp.net repeater交替模板各行變色,點擊,懸浮變色,不要復制粘貼

asp.net repeater交替模板各行變色,點擊,懸浮變色,不要復制粘貼

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;

}

以上給出的不是全部代碼,數據怎樣綁定,表格的字體、高度、邊框相信樓主自己會搞定吧?

這是運行過後的截圖,還滿意吧?

有壹行是灰色的,因為鼠標懸停在上面,但是鼠標不出現在截圖中。這壹行的顏色本身是白色的,希望不會給樓主帶來困擾。

  • 上一篇:靠岸的意思解釋
  • 下一篇:據說王思聰讓《吐槽大會》也攤上事了!背後究竟是怎麽回事?
  • copyright 2024編程學習大全網