How To Color Alternate Table Row Using CSS And Jquery




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

How To Color Alternate Table Row Using CSS, Color Alternate Table Row Using CSS, Color Alternate Table Row, Alternate Table Row Using CSS, How To Color Alternate Table Row, Select Alternate Table Row, Style Alternate Table Row, Border Alternate Table Row, CSS, Style

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




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.




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.