Repeater隔行变色,两个方式

1. <table>
2. <tr>
3. <td>用户编号</td>
4. </tr>
5. <asp:Repeater ID="rptUser" runat="server">
6. <ItemTemplate>
7. <tr style='background-color:<%#(Container.ItemIndex%2==0)?"red":"green"%>'>
8. <td><%#Eval("UID")%></td>
9. </tr>
10. </ItemTemplate>
11. </asp:Repeater>
12. </table>

在asp.net网站中，绑定repeater时，有时候需要隔行进行变色。如奇数行显示一种颜色，偶数行显示另一种颜色。效果图如上图所示，今天就看看绑定repeater时的一点技巧。

1. <ul id="list">
2. <asp:Repeater ID="rptTest" runat="server">
3. <ItemTemplate>
4. <li class="odd"><%#Container.ItemIndex+1 %>.<%#Eval("Title") %></li>
5. </ItemTemplate>
6. <AlternatingItemTemplate>
7. <li class="even"><%#Container.ItemIndex+1 %>.<%#Eval("Title") %></li>
8. </AlternatingItemTemplate>
9. </asp:Repeater>
10. </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。