交替的html表格行使用asp.net的背景颜色

Question

我使用c＃asp.net从数据库中检索数据。我不想在填充数据时使用Gridview，而是使用了html表格。我以这种方式成功从数据库中检索数据。

这里是HTML代码

<table class="listing" cellpadding="0" cellspacing="0"> 
    <tr> 
     <th>Lastname</th> 
     <th>Firstname</th> 
     <th>Middlename</th> 
     <th>Age</th> 
    </tr> 

    <%=LoadHtmlTableCustomerData()%> 

</table> 

而后面的代码。

public string LoadHtmlTableCustomerData() 
{ 
    SqlConnection connection = new System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings["dbaseconnection"].ConnectionString); 
    string HTML = ""; 
    try 
    { 
     SqlCommand command = new SqlCommand("SELECT * FROM tbl_Customers", connection); 
     connection.Open(); 
     SqlDataReader dr = command.ExecuteReader(); 
     if (dr.HasRows) 
     { 
      while (dr.Read()) 
      { 
       string lastname = dr[1].ToString(); 
       string firstname = dr[2].ToString(); 
       string middlename = dr[3].ToString(); 
       string age = dr[4].ToString(); 

       HTML += "<tr><td>" + lastname + "</td><td>" + firstname + "</td><td>" + middlename + "</td><td>" + age + "</td></tr>"; 
      } 
     } 
    } 
    catch (Exception) { } 
    finally { connection.Close(); } 
    return HTML; 
} 

如何做到这一点？例如我想把第一个tr标签放在tr class ='white-row'中;第二个标签tr class =“green-row”..等等

只是一个交替的行背景颜色。请帮帮我。

Answer 1

public string LoadHtmlTableCustomerData() 
{ 
    SqlConnection connection = new System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings["dbaseconnection"].ConnectionString); 
    string HTML = ""; 
    try 
    { 
     SqlCommand command = new SqlCommand("SELECT * FROM tbl_Customers", connection); 
     connection.Open(); 
     SqlDataReader dr = command.ExecuteReader(); 
     if (dr.HasRows) 
     { 
      int count = 0; 
      while (dr.Read()) 
      { 
       string lastname = dr[1].ToString(); 
       string firstname = dr[2].ToString(); 
       string middlename = dr[3].ToString(); 
       string age = dr[4].ToString(); 

       HTML += "<tr class=\"" + (count % 2 == 0 ? "white-row" : "green-row") + "\"><td>" + lastname + "</td><td>" + firstname + "</td><td>" + middlename + "</td><td>" + age + "</td></tr>"; 
       count++; 
      } 
     } 
    } 
    catch (Exception) { } 
    finally { connection.Close(); } 
    return HTML; 
} 

Answer 2

对于现代浏览器，您可以使用CSS。

tr:nth-child(odd) { background-color: #000; } 
tr:nth-child(even) { background-color: #fff; } 

http://davidwalsh.name/css-tables-css3-alternate-row-colors