user2656044
user2656044

Reputation: 47

Alternating html table row background colors using asp.net

I am using c# asp.net in retrieving the data from the database. I don't want to use Gridview in populating the data but instead, I used html table. I successfully retrieved the data from the database in this way.

here is the HTML code

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

    <%=LoadHtmlTableCustomerData()%> 

 </table>

And the code behind.

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;
}

How to achieve that? example I want to put the first tr tag like tr class='white-row'; second tag tr class="green-row".. and so on

Just an alternating row background color. Please help me.

Upvotes: 0

Views: 6050

Answers (2)

Chris Dixon
Chris Dixon

Reputation: 9167

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;
}

Upvotes: 1

Ruben-J
Ruben-J

Reputation: 2693

For modern browsers you can use CSS.

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

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

Upvotes: 3

Related Questions