Repeater隔行变色,两个方式

<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。



posted @ 2018-06-14 18:01  离。  阅读(36)  评论(0编辑  收藏  举报