码迷,mamicode.com
首页 > 其他好文 > 详细

Repeater隔行变色,两个方式

时间:2015-08-25 18:45:20      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

  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。

Repeater隔行变色,两个方式

标签:

原文地址:http://www.cnblogs.com/luoqin520/p/4757909.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!