CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SAJINA C
SAJINA C

Reputation: 150

Jquery datatable with tri color rows

I tried jquery datatable with tri colored rows which is repeating alternatively.But i got only two colored rows repeating.

Tried jquery datatable with tri colored rows
I'm using property even/odd for coloring

$(document).ready(function() {
    $('#example').dataTable();
} );
$(document).ready(function() {
 $("#example tr:even").css("background-color", "LightYellow");
 $("#example tr:odd").css("background-color", "LightBlue");
});

Upvotes: 6

Views: 885

Answers (1)

tvshajeer
tvshajeer

Reputation: 1329

You don't have to use jquery to implement this CSS is much suitable for that job. try this.

/*tri color rows*/
table.dataTable tbody tr:nth-child(3n+1)  {background-color: #FFCCCC;}
table.dataTable tbody tr:nth-child(3n+2)  {background-color: #99D6AD;}

table.dataTable tbody tr:nth-child(3n)    {background-color: #EBD6FF;}
th {
background: #aaf;
}
thead{
    background: #aaf;
}
/* End: tri color rows*/

check this Demo in js fiddle

Upvotes: 7

Related Questions