repeater改变整行背景颜色或者字体颜色

最新推荐文章于 2020-09-14 14:29:40 发布

mhl0410

最新推荐文章于 2020-09-14 14:29:40 发布

阅读量1.6k

点赞数

文章标签： server class border asp object table

本文链接：https://blog.csdn.net/mhl0410/article/details/5293784

版权

下面这种能实现一行一行的变色。（感觉比较烦）（本文全部省略掉了 Repeater在后台的绑定代码）

<asp:Repeater ID="Repeater1" runat="server" >
    <ItemTemplate>
       <table width="97%" height="25" border="0" align="center" cellpadding="0" cellspacing="0" style="border-bottom:1px #999999 dotted;">
         <tr id="row" runat="server">
           <td width="3%" align="center" class="cheng"> ·</td>
           <td width="97%" class="hei12" align=left>
              <a href="#" title="<%#Eval("titleName")%>" target="_blank">
                <font color='#ff0000'><%#Eval("titleName")%></font>(<%#Eval("AddTime", "{0:MM/dd}")%>) </a></td>
         </tr>
       </table>
    </ItemTemplate>
    <AlternatingItemTemplate>
      <table width="97%" height="25" border="0" align="center" cellpadding="0" cellspacing="0" style="border-bottom:1px #999999 dotted;">
          <tr id="row" runat="server">
            <td width="3%" align="center" class="cheng">·</td>
            <td width="97%" class="hei12" align=left>
              <a href="#" title="<%#Eval("titleName")%>" target="_blank">
               <%#Eval("titleName")%></font>(<%#Eval("AddTime", "{0:MM/dd}")%>)                          </a>   </td>
          </tr>
        </table>
</AlternatingItemTemplate>
</asp:Repeater>

如果要实现两行行的背景色红色，一行行的背景色黑色呢。

上面的方法中注意有<tr id="row" runat="server">

下面的方法实现的是行的背景色变色。前台的代码就可以省略<AlternatingItemTemplate>标签里面的内容并注意把<ItemTemplate> 里面的 <font color='#ff0000'> 删除掉。

protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
      {
        if ((e.Item.ItemIndex + 1) % 3 == 0)
           {
             ((HtmlTableRow)e.Item.FindControl("row")).BgColor= "#FF0000";
           }
       else
          {
             ((HtmlTableRow)e.Item.FindControl("row")).BgColor= "#000000";

}
}

}

如果你想实现的文字的改变，既是两行文字红色，一行文字黑色。就需要在Repeater 的ItemDataBound 事件里面来操作了。代码如下：

前台就需要用 Lable 了。因为行 tr 标签不是很好实现你的需求了。当然应该是能实现，不过我没有试过，毕竟这比较简单

<asp:Repeater ID="Repeater1" runat="server" onitemdatabound="Repeater1_ItemDataBound" >
    <ItemTemplate>
     <table width="97%" height="25" border="0" align="center" cellpadding="0" cellspacing="0" style="border-bottom:1px #999999 dotted;">
        <tr>
           <td width="3%" align="center" class="cheng">·</td>
           <td width="97%" class="hei12" align=left>
           <a href="#" title="<%#Eval("titleName")%>" target="_blank">
             <asp:Label ID="lblName" runat=server><%#Eval("titleName")%></asp:Label>(<%#Eval("AddTime", "{0:MM/dd}")%>) </a>     </td>
        </tr>
     </table>
  </ItemTemplate>

</asp:Repeater>

后台ItemDataBound 事件：

protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
    if ((e.Item.ItemIndex + 1) % 3 == 0)
       {
         ((Label)e.Item.FindControl("lblName")).ForeColor = System.Drawing.Color.Black;
       }
    else
       {
         ((Label)e.Item.FindControl("lblName")).ForeColor = System.Drawing.Color.Red;
       }
}
}

这样就可以了