Repeater 如何实现文章列表 “隔行换色” 显示

[-筑梦人-]

我用Repeater 做了一个文章列表。

------------------头部分---------------------------------------------------------------
<table cellpadding="0" class="UserArtClass" cellspacing="0">
<tr class="UClassTblTitle">
<td class="UArtTitle">标题</td>
<td class="UClickCount">点击量</td>
<td class="UTjCount">推荐量</td>
<td class="UDingCai">顶/踩</td>
<td class="UShenHe">审核状态</td>
<td class="UCreateDate">发表时间</td>
</tr>
-------------数据绑定部分--------------------------------------------------------------
<asp:Repeater ID="RepArtList" runat="server" EnableViewState="false">
<ItemTemplate>
<tr class="TrWhite">
<td class="UclassArtTitle"><a href="#"><%# Eval("ArticleTitle")%></a></td>
<td><%# Eval("ViewCount")%></td>
<td><%# Eval("TjCount")%></td>
<td><%# Eval("UpCount")%> / <%# Eval("DownCount")%></td>
<td><%# Eval("ArtStatus")%></td>
<td><%# Convert.ToDateTime(Eval("CreateDate")).ToString("yyyy-MM-dd HH:mm")%></td>
</tr>
</ItemTemplate>
</asp:Repeater>

-----------------尾部分-----------------------------------------------------
</table>
--------------------------------------------------------------------

现在我想实现在数据绑定部分，隔行换色，如何实现？ 需考虑，效率 和 性能

奇数行 是白色 有 class="TrWhite"
偶数行 是灰色 有 class="TrGray"

css 都已写好，只是如何实现。

望大家帮忙，万分感谢。

[暖枫无敌]

方法很多的，下面提供一种简单的
<tr class='<%#(Container.ItemIndex%2==0)?"TrGray":"TrWhite"%>'>

<asp:Repeater ID="RepArtList" runat="server" EnableViewState="false">
  <ItemTemplate>
  <tr class='<%#(Container.ItemIndex%2==0)?"TrGray":"TrWhite"%>'>
  <td class="UclassArtTitle"><a href="#"><%# Eval("ArticleTitle")%></a></td>
  <td><%# Eval("ViewCount")%></td>
  <td><%# Eval("TjCount")%></td>
  <td><%# Eval("UpCount")%> / <%# Eval("DownCount")%></td>
  <td><%# Eval("ArtStatus")%></td>
  <td><%# Convert.ToDateTime(Eval("CreateDate")).ToString("yyyy-MM-dd HH:mm")%></td>
  </tr>
  </ItemTemplate>
  </asp:Repeater>

[风一样的大叔]

不会,学习中

[yue547283947]

<%# (Container.ItemIndex+1) % 2 ==0 ? 样式: 样式%>

[格桑花]

[Quote=引用 3 楼 taomanman 的回复:]
方法很多的，下面提供一种简单的
<tr class='<%#(Container.ItemIndex%2==0)?"TrGray":"TrWhite"%>'>

C# code


<asp:Repeater ID="RepArtList" runat="server" EnableViewState="false">
<ItemTemplate>
<tr class='<……
[/Quote]

++++

[flyerwing]

</ItemTemplate>
<AlternatingItemTemplate>
有交替行的.其实不用也成的

[我说我行就是行]

在 <AlternatingItemTemplate>
在这里写
</AlternatingItemTemplate>

[qq623932737]

[Quote=引用 2 楼 aig003 的回复:]
我有个最简单的方法 ,,

C# code


<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<div class="Title">
ID</div>
<div cla……
[/Quote]

++ 就这样 加两行

[快乐的小二兔]

三源和自带的换色都不错的。楼主快用吧 个人认为三源简洁，自带的麻烦。

[yksyuan]

  <script language="javascript"><!--
    function theObjTable(o,a,b,c){
        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"){
                }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>
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");

[milan8487]

[Quote=引用 3 楼 taomanman 的回复:]

方法很多的，下面提供一种简单的
<tr class='<%#(Container.ItemIndex%2==0)?"TrGray":"TrWhite"%>'>
C# code

<asp:Repeater ID="RepArtList" runat="server" EnableViewState="false">
<ItemTemplate>
<tr class='<%#(Con……
[/Quote]
+++++++++++++++++++++++

[Sophia_2011]

<tr class='<%#(Container.ItemIndex%2==0)?"TrGray":"TrWhite"%>'>

[SeanDing1989]

有个
<AlternatingItemTemplate>
............
</AlternatingItemTemplate>

还是用jq控制吧！简单就用上面的！

[ZhuZhuYuXiang]

<asp:Repeater ID="RepArtList" runat="server" EnableViewState="false">
  <ItemTemplate>
  <tr class='<%#(Container.ItemIndex%2==0)?"TrGray":"TrWhite"%>'>
  .....
或者判断：if(){}else{}
  </tr>
  </ItemTemplate>
  </asp:Repeater>

[子夜__]

最简单的 根据绑定索引 来判断 奇数偶数

DEMO

<asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <tr style='background-color: <%#(Container.ItemIndex%2==0)?"#fff":"#ccc"%>'>
                <td>
                    <%# Eval("ID") %>
                </td>
                <td>
                    <%# Eval("Name") %>
                </td>
                <td>
                    <%# Eval("Address") %>
                </td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>

<%#(Container.ItemIndex%2==0)?"#fff":"#ccc"%>'>

[senyi168]

呵呵，以上方法都可以！我昨天刚好也遇到这个问题，最后我用了子夜兄这种方法！

[ycproc]

<style type="text/css">
.alt td {
 background:#effafc;
}
</style>
 
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
   
        <ItemTemplate>
      
       <tr class=<%#(Container.ItemIndex%2==0)?"\"alt\"":"\"\""%>>
        <td class="td1"><%# DataBinder.eval_r(Container.DataItem,"Rq","{0:yyyy年MM月dd日}") %></td>
        <td class="td2"><%#eval_r("Out_Time")%></td>
        <td class="td3"><%#eval_r("OperatorName")%></td>
        <td class="td4"><%#eval_r("DepartmentName")%></td>
        <td class="td5"><%#eval_r("Memo")%></td>
        <td class="td6"><%#eval_r("In_Time")%></td>
         </tr>
        </ItemTemplate>
          </asp:Repeater>

[呆子罗]

使用JQuery容易实现

<style type="text/css">
.oddtr_bg{background-color:#efefef;}/*偶数行*/
.eventr_bg{background-color:#ffffff;}/*奇数行*/
</style>
<script src="../js/JQuery1.5.1.js" type="text/jscript" language="javascript"></script>
<script type="text/jscript" language="javascript">
$(function(){
   //隔行变色
    var $tr_odd = $("tbody>tr:odd");
    var $tr_even = $("tbody>tr:even");
    var $trs = $("tbody tr");
    $tr_odd.addClass("oddtr_bg"); /*偶数行添加样式 .oddtr_bg*/
    $tr_even.addClass("eventr_bg"); /*奇数行添加样式 .eventr_bg*/
})
</script>
    <table class="msg" border="1">		
			        <thead>
					<tr>
					<th width="5%"></th>
					<th width="15%">名字</th>
					<th width="45%">公司</th>
					<th width="20%">电话</th>
					<th width="15%">编辑/删除</th>
					</tr>
                    </thead>
                            <tbody>
                                <asp:Repeater ID="rptCards" runat="server">
                                <ItemTemplate>
				<tr>
				<td>绑定的数据</td>
				<td>绑定的数据</td>
				<td>绑定的数据</td>							
                                <td>绑定的数据</td>
				<td>绑定的数据</td>
				</tr>
				</ItemTemplate>
                                </asp:Repeater>
			       </tbody>
</table>

[-筑梦人-]

最终用的 是 3楼 taomanman 的方法，非常感谢

但19楼的朋友，让我明白了，jq的 这种奇偶不同的方式，所以 2人 各 10分。

同时 也很感谢，参与进我问题的朋友们。

放分。。。

[yksyuan]

虽然 已经结贴了。但还是要说下

其实 我的11楼代码完全 可以实现

我就是用的这个

呵呵 留个记号。万一以后 谁搜索时。可以 试验下 JS写法

[erif1001]

不错，好方法