CODEWITHSUNDEEP
c#htmlcssdatatablehtml-table
Our Man in Bananas
Our Man in Bananas

Reputation: 5981

add alternate background style to odd rows of HTML table

I am creating an email log to report on activities of my application.

The table is working finr but when hundreds of records are output it is difficult to read.

Here is my existing code (I loop through a c# datatable to get the records)

foreach (task_creditcases item in creditCases)
{
    sb.Append("<tr>");
    // Document Name
    sb.Append("<td>" + item.c_Id + "</td>");
    sb.Append("<td>" + item.c_Name + "</td>");
    sb.Append("<td>" + "Credit Case" + "</td>");
    sb.Append("<td>" + "Credit Case" + "</td>");
    sb.Append("<td>" + item.c_EquationCustomerNumber + "</td>");
    sb.Append("<td>" + item.c_AdditionalInfo + "</td>");
    sb.Append("<td>" +  Convert.ToDateTime(item.c_Close_Date__c).ToString("dd/MM/yyyy") + "</td>");
    sb.Append("<td>" + item.c_ImagingDocument + "</td>");
    sb.Append("<td>" + item.c_ContentType + "</td>");
    sb.Append("<td>" + item.c_Status__c + "</td>");
    sb.Append("<td>" + item.c_Document_Type__c + "</td>");
    sb.Append("<td>" + item.c_ImagingDSXDirectory + "</td>");
    sb.Append("<td>" + item.c_ImagingDocument + "</td>");
    sb.Append("</tr>");
}

sb.Append("</tbody>");
sb.Append("</table>");

how could I add a background shading to every other row?

thanks Philip

Upvotes: 0

Views: 2904

Answers (4)

Our Man in Bananas
Our Man in Bananas

Reputation: 5981

thanks everyone,

here is what I did before I saw jumpingcode's answer:

    foreach (task_cases item in cases)
            {
                //sb.Append("<tr>");
                var idx = 0;

                bool even = idx % 2 == 0;
                if (even)
                    {
                    sb.Append("<tr background-color:#eee;>");
                    }
                else
                    {
                    sb.Append("<tr background-color:#fff;>");
                    }

Upvotes: 0

ediblecode
ediblecode

Reputation: 11971

Cross Browser solutions


Option 1: jQuery

If you're not intending to support IE8 or less then the nth-child selector will not work for you. However, using jQuery you can simply add the following as jQuery does support nth-child. Or alternatively, in jQuery you can use :even and :odd. You'd need to figure out when to call this though.

$("tbody > tr:even" ).css("background-color", "blue");
$("tbody > tr:odd" ).css("background-color", "red");


Option 2: no jQuery

Or from your code have:

var count = 0;
foreach (task_creditcases item in creditCases)
{
    if (count++ % 2 == 0)
        sb.Append("<tr class=\"even\">");
    else
        sb.Append("<tr class=\"odd\">");

    // Rest of sb.code
}

Then in your CSS file add:

tbody > tr.odd { background-color: red; }
tbody > tr.even { background-color: blue; }

I'd recommend the second option since you wouldn't have to touch jQuery which applies the styles inline. Performance is better if the styles are in the CSS vs inline.

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115109

tbody tr:nth-child(even) {
   background-color: #bada55;
}

tbody tr:nth-child(odd) {
   background-color: lightblue;
}

Codepen Demo

Upvotes: 7

Henk Jansen
Henk Jansen

Reputation: 1142

tr:nth-child(odd) {background: #FFF}

or

tr:nth-child(even) {background: #FFF}

Add one of those to your css, depending on even or oneven rows.

Upvotes: 3

Related Questions