Repeater隔行變色,兩個方式
阿新 • • 發佈:2018-11-29
<table> <tr> <td>使用者編號</td> </tr> <asp:Repeater ID="rptUser" runat="server"> <ItemTemplate> <tr style='background-color:<%#(Container.ItemIndex%2==0)?"red":"green"%>'> <td><%#Eval("UID")%></td> </tr> </ItemTemplate> </asp:Repeater> </table>
在asp.net網站中,繫結repeater時,有時候需要隔行進行變色。如奇數行顯示一種顏色,偶數行顯示另一種顏色。效果圖如上圖所示,今天就看看繫結repeater時的一點技巧。
<ul id="list"> <asp:Repeater ID="rptTest" runat="server"> <ItemTemplate> <li class="odd"><%#Container.ItemIndex+1 %>.<%#Eval("Title") %></li> </ItemTemplate> <AlternatingItemTemplate> <li class="even"><%#Container.ItemIndex+1 %>.<%#Eval("Title") %></li> </AlternatingItemTemplate> </asp:Repeater> </ul>
可以看出,間隔換色時用到了<AlternatingItemTemplate></AlternatingItemTemplate>。接下來,在樣式中稍微設定下,就可以實現了。如下:
#list{ list-style:none; width:330px;}
#list li{ background:#50A3E5; margin-top:5px;}
.odd{ color:White;}
.even{ color:Yellow;}
最後,繫結行號時用了<%#container.itemindex+1>,ItemIndex從0開始,所以使用時要加1。