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.
Watch Video of this Content on Video Steaming