How To Color Alternate Table Row Using CSS And Jquery

For More Videos Visit Our YouTube Channel

How To Color Alternate Table Rows

Here we consider how to Color Alternate Table Row Using CSS and Jquery. Suppose we have a table as shown below.



We wants to color alternate rows of this table. This can be done in both CSS and Jquery.


Color Alternate Table Row Using CSS

In CSS, there is a pseudo-selector, named nth-child. By using nth-child in CSS, we can select alternate rows. Here we want to color alternate even rows using css. For that we can use following code.

tr:nth-child(even) {
       background-color: red;
}



If you want alternate odd rows, we can use following code.

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



That's, all by using above CSS code, we can Color Alternate Table Row.


Color Alternate Table Row Using Jquery

In Jquery, we can select alternate even rows as follows

$(document).ready(function()
{
       $("tr:even").css("background-color", red);
});



We can select alternate odd rows as follows

$(document).ready(function()
{
       $("tr:odd").css("background-color", red);
});



That's, all by using above Jquery code, we can Color Alternate Table Row.