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。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值