如何用DataList让不同的背景交互显示?

具体参见http://www.gzjd.gov.cn/"最新消息"这一栏显示内容的背景,淡蓝色与白色交互显示,如何用DataList显示不同的背景?我原来的代码如下:
<asp:DataList ID="DataList2" runat="server" Width =300>
                  <ItemTemplate>
                                <TABLE class=line20px cellSpacing=0
                                cellPadding=0 width="98%" border=0>
                                <TBODY>

                                <TR>
                                <TD class=line22px height=22><DIV
                  style="LINE-HEIGHT: 26px; BORDER-BOTTOM: #cccccc 1px dashed"><IMG height=<%#Eval("flag").ToString()=="0" ?6:12%>
                                src="<%#Eval("flag").ToString()=="0" ? "images/in_1.gif" : "images/in_2.gif"%>"><a href='Show.aspx?nid=<%#Eval("nclassid")%>&id=<%#Eval("id")%>' > <%# Eval("Title").ToString().Length > 17 ? Eval("Title").ToString().Substring(0, 17) : Eval("Title")%></a>
                               <font color="#949494">[<%# String.Format("{0:d}", Eval("intime"))%>]</font></DIV></TD></TR>
                                                               </TBODY></TABLE></ItemTemplate>
                  </asp:DataList>
怎么修改上面的代码?谢谢!!

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

在前端写JS调整CSS。
获取列表下所有条目，然后遍历，奇数条目一个背景色，偶数条目一个背景色。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="register_jquery.index" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".truecolor tr:odd").addClass("color1");
            $(".truecolor tr:even").addClass("color2");
            $(".truecolor tr").hover(function () {
                jQuery(this).addClass("color3")
            }, function () {
                jQuery(this).removeClass("color3")
            });
        });
    </script>
    <style type="text/css">
        .truecolor
        {
            border: 1px solid #333;
            text-align: center;
            cursor: pointer;
            border-collapse: collapse;
        }
        .truecolor td
        {
            border: 1px solid #ccc;
            padding: 8px;
        }
        .truecolor th
        {
            background-color: #333;
            color: #FFF;
            padding: 10px;
        }
        .color1
        {
            background-color: #DDD;
            color: #333;
        }
        .color2
        {
            background-color: #fff;
            color: #333;
        }
        .color3
        {
            background-color: #666;
            color: #FFF;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width="450" class="truecolor">
            <thead>
                <tr>
                    <th>
                        博客
                    </th>
                    <th>
                        作者
                    </th>
                    <th>
                        网址
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        风格之舞
                    </td>
                    <td>
                        火德
                    </td>
                    <td>
                        隔行换色
                    </td>
                </tr>
                <tr>
                    <td>
                        赵雷的博客
                    </td>
                    <td>
                        赵雷
                    </td>
                    <td>
                        新浪微博
                    </td>
                </tr>
                <tr>
                    <td>
                        寂寞广场
                    </td>
                    <td>
                        魏春亮
                    </td>
                    <td>
                        同学录
                    </td>
                </tr>
                <tr>
                    <td>
                        淘宝UED
                    </td>
                    <td>
                        淘宝
                    </td>
                    <td>
                        经常购物
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>
自己引用jquery库文件
protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        for (int i = 0; i < DataList1.Items.Count; i++)
        {
            int row = i / 2; //2为每行显示的列数
            if (row % 2 == 0)
            {
                DataList1.Items[i].BackColor = Color.White; //淡色
            }
            else
            {
                DataList1.Items[i].BackColor = Color.WriteSmoke;//深色
            }
        }
    }
我直接在aspx.cs里面加入上面代码,结果显示这样的错误:
编译器错误信息: CS0103: 当前上下文中不存在名称“Color”
if (row % 2 == 0)
行 52:             {
行 53:                 DataList1.Items[i].BackColor = Color.White; //淡色
行 54:             }
行 55:             else
还有,在ASPX页面<asp:DataList ID="DataList2" runat="server" Width =300>
中要不要修改?谢谢!!
using System.Drawing;
引入System.Drawing命名空间;
aspx页面不用修改
谢谢,但又有另一个问题出现
“System.Drawing.Color”并不包含“WriteSmoke”的定义
我修改了Blue
  protected void DataList2_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        for (int i = 0; i < DataList2.Items.Count; i++)
        {
            int row = i / 2; //2为每行显示的列数
            if (row % 2 == 0)
            {
                DataList2.Items[i].BackColor = Color.White; //淡色
            }
            else
            {
                DataList2.Items[i].BackColor = Color.Blue;//深色
            }
        }

    }
还是没有交互显示效果啊?
Button1.BackColor = System.Drawing.Color.FromArgb(255, 255, 0);
using System.Drawing;
看看你绑定的代码。