Repeater绑定数据怎么实现每一行背景颜色不一样？

我用repeater绑定数据，想实现，每一行帮顶两条数据，然后自动换行，

而且第一行的背景颜色是红色，第二行是蓝色，第三行还是红色，第四行蓝色，

然后就以此类推，

我现在没有思路，大家帮帮忙，出出主意，

帮我解决下，谢谢，

27 个解决方案

#1

 <asp:Repeater ID="Repeater1" runat="server">
         <ItemTemplate><div style="background-color:Red;"></div></ItemTemplate>
         <AlternatingItemTemplate><div style="background-color:Blue;"></div></AlternatingItemTemplate>
        </asp:Repeater>

#2

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate><tr></tr></ItemTemplate>
  <AlternatingItemTemplate><tr></tr></AlternatingItemTemplate>
  </asp:Repeater>

#3

1,第一中方法，使用repeater模板：
<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate><tr></tr></ItemTemplate>
  <AlternatingItemTemplate><tr></tr></AlternatingItemTemplate>
  </asp:Repeater>
2，第二种方法，使用js改变样式

// 颜色加深
function Fuscous(obj)
{
    obj.style.backgroundColor='#D3DEEF';
}
//颜色恢复为白色
function Undertone(obj)
{
    obj.style.backgroundColor='#ffffff';     
}

<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
                            <ItemTemplate>
                                <tr onmouseover="Fuscous(this)" onmouseout="Undertone(this)">
                                    </td>
                                     </td>
                                </tr>
                            </ItemTemplate>
                        </asp:Repeater>

#4

在两个模板中分别来定义，模板<ItemTemplate> <AlternatingItemTemplate>表示单行和双行。

#5

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate><div style="background-color:#0000EE;"></div></ItemTemplate>
  <AlternatingItemTemplate><div style="background-color:#CD0000;"></div></AlternatingItemTemplate>
  </asp:Repeater>

#6

<ItemTemplate> 
<tr bgcolor="yellow"></tr> 
</ItemTemplate> 
<AlternatingItemTemplate> 
<tr bgcolor= "blue "></tr> 
</AlternatingItemTemplate>
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
        {}设置颜色 

#7

可以直接用模板设置，交叉行

#8

建议您考虑这两种方式：
1 用背景图，只要你做一小段两行不同颜色的图，然后作为背景平铺即可，代码简洁，也不耗资源。
2 给表格命个名，然后在HTML末尾调用JS改变各行背景，JS脚本从JS文件载入。代码也很简洁，消耗的是客户端的一点点资源。而且除了 隔行交替色 以外还可以加上 鼠标滑过的行颜色 鼠标点击过的行颜色 等一系类效果。

js脚本：

<script language="javascript"><!--

// JavaScript Document
function senfe(o,a,b,c,d){
	//这个函数实现表格隔行变色和鼠标移动、点击变色效果
	//senfe("表格ID","奇数行背景色","偶数行背景色","鼠标经过时背景色","鼠标点击后的背景色");
 var t=document.getElementById(o).getElementsByTagName("tr");
 for(var i=0;i<t.length;i++){
  t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
  t[i].onclick=function(){
   if(this.x!="1"){
    this.x="1";
    this.style.backgroundColor=d;
   }else{
    this.x="0";
    this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
   }
  }
  t[i].onmouseover=function(){
   if(this.x!="1")this.style.backgroundColor=c;
  }
  t[i].onmouseout=function(){
   if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
  }
 }
}
--></script>

调用JS的方法

<script language="javascript"><!--
senfe("senfe","#fff","#fff","#ffffad","#ffffad");
--></script>

#9

<asp:Repeater ID="rpt1" runat="server">
<ItemTemplate>
   //这里设置红色背景
</ItemTemplate>
<AlternatingItemTemplate>
    //这里设置蓝色背景
</AlternatingItemTemplate>
</asp:Repeater>

#10

引用 1 楼 woshimaikou 的回复:

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate><div style="background-color:Red;"></div></ItemTemplate>
  <AlternatingItemTemplate><div style="background-color:Blue;"></div></Alternati……

帮顶~~~

#11

mark

#12

mark

#13

用e.Item.ItemIndex;
switch(e.Item.ItemIndex){
case 0:
//添加背景色
break;
}

#14

该回复于2010-07-15 16:18:44被版主删除

#15

路过，帮顶下

#16

1楼正解

#17

可行

引用 6 楼 wuyq11 的回复:

<ItemTemplate> 
<tr bgcolor="yellow"></tr> 
</ItemTemplate> 
<AlternatingItemTemplate> 
<tr bgcolor= "blue "></tr> 
</AlternatingItemTemplate>
if (e.Item.ItemType == ListItemType.AlternatingItem……

#18

引用 2 楼 zxqiangwhere 的回复:

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate><tr></tr></ItemTemplate>
  <AlternatingItemTemplate><tr></tr></AlternatingItemTemplate>
  </asp:Repeater>

如果这样，比如说，数据用个label显示出来，我是不是label要放两个位置，

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate><tr><asp:label id="label1"></tr></ItemTemplate>
  <AlternatingItemTemplate><tr><asp:label id="label2"></tr></AlternatingItemTemplate>
  </asp:Repeater>

是这样吗》

#19

引用 1 楼 woshimaikou 的回复:

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate><div style="background-color:Red;"></div></ItemTemplate>
  <AlternatingItemTemplate><div style="background-color:Blue;"></div></Alternati……

这是两种模板,交叉模板颜色更改即可

#20

用交替模板列代码翻倍，直接 在tr上设置样式如下：

<ItemTemplate>   
         <tr bgcolor="<%#(Container.ItemIndex+1)%2 == 1 ? "#D9DCE8":"#F2F3F7"%>">  

#21

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate><tr><asp:label id="label1"></tr></ItemTemplate>
  <AlternatingItemTemplate><tr><asp:label id="label2"></tr></AlternatingItemTemplate>
  </asp:Repeater>

#22

引用 20 楼 claymore1114 的回复:

用交替模板列代码翻倍，直接 在tr上设置样式如下：

C# code

<ItemTemplate>   
         <tr bgcolor="<%#(Container.ItemIndex+1)%2 == 1 ? "#D9DCE8":"#F2F3F7"%>">

怎么用代码控制，每一行只显示两条数据，
它不像datalist一样，直接可以设置每行显示两条数据啊

#23

大家帮帮忙啊 ，怎么每行显示两条数据啊 

#24

该回复于2010-07-09 16:18:35被版主删除

#25

引用 20 楼 claymore1114 的回复:

用交替模板列代码翻倍，直接 在tr上设置样式如下：


C# code


<ItemTemplate>   
         <tr bgcolor="<%#(Container.ItemIndex+1)%2 == 1 ? "#D9DCE8":"#F2F3F7"%>">

这个怎么没效果啊

#26

可以    回复内容太短了！

#27

引用 2 楼 zxqiangwhere 的回复:

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate><tr></tr></ItemTemplate>
  <AlternatingItemTemplate><tr></tr></AlternatingItemTemplate>
  </asp:Repeater>

+1