表格奇偶数行的背景色不同

Question

比如说这个页面：
http://www.wyxuan.com/list.aspx?id=3
用的是repeater控件绑定表格
我想让表格奇偶数行的背景色不同
怎么办？
不是鼠标移上去才换背景色
就像CSDN论坛的帖子列表一样
因为是repeater控件自动动态的输出内容

Answer 1

我记得gridview有这个样式  你把样式换到repeater下面看看

Answer 2

            <asp:Repeater ID="rptUsers" runat="server">
            <HeaderTemplate>
               <table width="98%" align="center" cellpadding="0" cellspacing="0">
                  <tr height="23px">
                     <td style=" background-image:url(../images/role/title_L.gif); width:30px"></td>
                     <td style=" background-image:url(../images/role/title_M.gif);" valign="bottom" align="left">
                         <span style="color:#B96F26; font-weight:bolder;">用户列表</span>
                     </td>
                     <td style=" background-image:url(../images/role/title_R.gif); width:14px"></td>
                  </tr>
                </table>
               <table width="98%" align="center" cellpadding="0" cellspacing="0" class="btr">
               <tr bgcolor="#ECF4FE">
               <td align="center" width="7%"><strong>选  择</strong></td>
               <td align="center" width="10%"><strong>用户ID</strong></td>
               <td align="center" width="15%"><strong>用户姓名</strong></td>
               <td align="center" width="15%"><strong>IMEI</strong></td>
               <td align="center" width="15%"><strong>用户类型</strong></td>
               <td align="center" width="15%"><strong>登陆次数</strong></td>
               <td align="center" width="8%"><strong>状态</strong></td>
               <td align="center" width="15%"><strong>操  作</strong></td>
               </tr>
            </HeaderTemplate>
            <ItemTemplate>
            <tr bgcolor="">
            <td align="center"><input id="ckbxSelect" type="checkbox" runat="server" value='<%#DataBinder.Eval(Container.DataItem,"ID")%>'/></td>
            <td align="center"><%#DataBinder.Eval(Container.DataItem, "USERID")%></td>
            <td align="center"><%#DataBinder.Eval(Container.DataItem, "USERNAME")%></td>
            <td align="center"><%#DataBinder.Eval(Container.DataItem, "IMEI")%></td>
            <td align="center"><%#DataBinder.Eval(Container.DataItem, "USERTYPE").ToString()=="0"?"后台用户":"前台用户"%></td>
            <td align="center"><%#DataBinder.Eval(Container.DataItem, "ACCNUM")%></td>
            <td align="center"><%#DataBinder.Eval(Container.DataItem, "STATE").ToString()=="0"?"已启用":"已禁用"%></td>
            <td align="center">
                <a href="stop.aspx?id=<%#DataBinder.Eval(Container.DataItem, "ID")%>"><img width="16px" height="16px" alt="<%#DataBinder.Eval(Container.DataItem, "STATE").ToString()=="0"?"禁用":"启用"%>" border="0" src="../images/role/<%#DataBinder.Eval(Container.DataItem, "STATE").ToString()=="0"?"stop.gif":"normal.gif"%>" /></a>&nbsp;&nbsp;
                <a href="javascript:open_editUser('<%#DataBinder.Eval(Container.DataItem, "ID")%>');">
                <img alt="编辑" border="0" src="../images/role/edit.gif" /></a>&nbsp;&nbsp;
                <a href="delete.aspx?id=<%#DataBinder.Eval(Container.DataItem, "ID")%>" target="mainright">
                <img alt="删除" border="0" src="../images/role/del.gif" /></a>
            </td>
            </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
             <tr bgcolor="#ECF4FE">
               <td align="center"><input id="ckbxSelect" type="checkbox" runat="server" value='<%#DataBinder.Eval(Container.DataItem,"ID")%>'/></td>
                <td align="center"><%#DataBinder.Eval(Container.DataItem, "USERID")%></td>
                <td align="center"><%#DataBinder.Eval(Container.DataItem, "USERNAME")%></td>
                <td align="center"><%#DataBinder.Eval(Container.DataItem, "IMEI")%></td>
                <td align="center"><%#DataBinder.Eval(Container.DataItem, "USERTYPE").ToString()=="0"?"后台用户":"前台用户"%></td>
                <td align="center"><%#DataBinder.Eval(Container.DataItem, "ACCNUM")%></td>
                <td align="center"><%#DataBinder.Eval(Container.DataItem, "STATE").ToString()=="0"?"已启用":"已禁用"%></td>
                <td align="center">
                 <a href="stop.aspx?id=<%#DataBinder.Eval(Container.DataItem, "ID")%>"><img width="16px" height="16px" alt="<%#DataBinder.Eval(Container.DataItem, "STATE").ToString()=="0"?"禁用":"启用"%>" border="0" src="../images/role/<%#DataBinder.Eval(Container.DataItem, "STATE").ToString()=="0"?"stop.gif":"normal.gif"%>" /></a>&nbsp;&nbsp;
                <a href="javascript:open_editUser('<%#DataBinder.Eval(Container.DataItem, "ID")%>');">
                <img alt="编辑" border="0" src="../images/role/edit.gif" /></a>&nbsp;&nbsp;
                <a href="delete.aspx?id=<%#DataBinder.Eval(Container.DataItem, "ID")%>" target="mainright">
                <img alt="删除" border="0" src="../images/role/del.gif" /></a>
            </td>
            </tr>
            </AlternatingItemTemplate>
            <FooterTemplate>
            <tr><td colspan="8">               
                <table id="div_info" align="left" width="98%" runat="server" style="background-color:#E6E7E9; color:#454545; width:100%; height:30px;
                        margin-top:-1px; border-right: #454545 1px solid;border-left: #D4D0C8 1px solid;
                        border-top: #D4D0C8 1px solid; border-bottom: #000000 1px solid;" visible="true">
                        <tr><td align="left">&nbsp;&nbsp;&nbsp;&nbsp;<input id="ckbxSelectAll" class="txtbx" type="checkbox" onclick="selectAll();" visible="true" title="选中所有" value="选中所有" /><strong>选中所有</strong></td></tr>
                 </table>
            </td></tr>
            </table>
            </FooterTemplate>
           </asp:Repeater>
看一下子了!

Answer 3

<ItemTemplate>
<alternItemTemplate>
交替行，上面的标签我凭感觉写的哈，呵呵

Answer 4

在gridview的设计视图里面设计他的样式  样式代码在页面代码里面

Answer 5

CSS Repeater - 交错显示行背景色 table行鼠标进入事件特效 禁止文本换行 
这个可以:http://www.cnblogs.com/jiangyuxuan/articles/843233.html

Answer 6

你的可以在后台根据RowIndex判断奇偶判断的。

Answer 7

老土方法：<td></td>中的 bgcolor='<%# Evel("一个字段") %>'你查询的数据集里动态添加一列，循环，分奇偶赋值...不用写代码了吧？

Answer 8

定义ItemDataBound 事件      
加入下列代码:
e.Item.Attributes["onmouseover"]="this.name=this.style.backgroundColor;this.style.backgroundColor='#CCCCFF';";
e.Item.Attributes["onmouseout"]="this.style.backgroundColor=this.name;";

Answer 9

<AlternatingItemTemplate>
哦，这么个样子...

Answer 10

<AlternatingRowStyle BackColor="Control"></AlternatingRowStyle>

Answer 11

参考
http://www.cnblogs.com/RicCC/archive/2008/09/11/778403.html

Answer 12

<ItemTemplate> 
<alternItemTemplate> 两个里面的数据代码一样就可以啦，

Answer 13

 protected void gvrObject_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
gvrObject.Row.Attributes.Add("OnMouseOver", "this.style.backgroundColor='#DEF3FF';this.style.cursor='hand'");
        gvrObject.Row.Attributes.Add("OnMouseOut", "this.style.backgroundColor='#ECECEC';this.style.cursor='hand'");
}
}

Answer 14

可以用js+css来控制css样式.odd {background-color:#cccccc;}.even {background-color:#ffffff;}js以jQuery为例$(document).ready(function(){
    $("tr:odd").addClass("odd");
    $("tr:even").addClass("even");
});

Answer 15

http://blog.csdn.net/21aspnet/archive/2007/03/25/1540301.aspx
看一下这个