C＃中动态表格的备用行颜色

Question

I want to give alternate color to Rows which are going to create dynamically. Following is the table structure in aspx.cs page, I am using

         StringBuilder html = new StringBuilder();

         foreach (DataRow row in dsDashboardDetails.Tables[0].Rows)
            {

                html.Append("<tr style='color: Black'>");

                foreach (DataColumn column in dsDashboardDetails.Tables[0].Columns)
                {
                    html.Append("<td>");
                    html.Append(row[column.ColumnName]);
                    html.Append("</td>");
                }
                html.Append("</tr>");

            }
            //Table end.
            html.Append("</table>");

Answer 1

why not use css:

<style type="text/css">
    tr:nth-child(odd) { background-color:#eee; }
</style>

Answer 2

Have you tried setting a counter and incrementing that whilst looping?

Then everytime you output a row and the counter is odd, for example, you can conditionally output a different style for the row.

It may be better to separate the styles as CSS and alternate class names whilst outputting so you don't have to modify your code when/if you want to change the styling of your site.

Answer 3

This is a safe way that works for old browsers.

StringBuilder html = new StringBuilder();
var rowCount = 0;
foreach (DataRow row in dsDashboardDetails.Tables[0].Rows)
{
    var className = rowCount++ % 2 == 0 ? "even" : "odd"; //check if it is an odd or even rowCount
    html.Append("<tr style='color: Black' class='"+className+"'>");

    foreach (DataColumn column in dsDashboardDetails.Tables[0].Columns)
    {
        html.Append("<td>");
        html.Append(row[column.ColumnName]);
        html.Append("</td>");
    }
    html.Append("</tr>");
}

//Table end.
html.Append("</table>");

Add this CSS for the Rows

tr.odd{
    background-color: #999;
}
tr.even{
    background-color: #ccc;
}

Answer 4

It's really bad practice to mix layout (html) with backend code. And I would suggest you'd solve your problem with a DataRepeater (or Razor depending on your project) in combination with CSS; -- add a <table> first in the StringBuilder btw;

CSS:

table tbody tr:nth-child(odd) {
    background-color: #eee;
}

but if you want to stick to this concept you could use a "toggle" boolean, like so:

bool background=false;
foreach (DataColumn column in dsDashboardDetails.Tables[0].Columns)
                {
                    html.Append("<td>");
if (background) { // add color }
background = !background;
                    html.Append(row[column.ColumnName]);
                    html.Append("</td>");
                }

Answer 5

You can use css , but if you're looking for pure C# , use a counter:

StringBuilder html = new StringBuilder();
var rowIndex = 0;
foreach (DataRow row in dsDashboardDetails.Tables[0].Rows) {
    html.AppendFormat("<tr style='color: {0}'>", 
        rowIndex % 2 == 0 ? "Black" : "Red"); // Red or anything you want
    foreach (DataColumn column in dsDashboardDetails.Tables[0].Columns) {
        html.Append("<td>");
        html.Append(row[column.ColumnName]);
        html.Append("</td>");
    }
    html.Append("</tr>");
}
//Table end.
html.Append("</table>");