Jquery datatable with three row colors

Question

I tried jquery datatable with tri-color strings that are repeated alternatively. But I repeat only two colored lines.

Tried jquery datatable with tri-color strings
I use the even / odd property for coloring

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

Answer 1

You do not need to use jquery to implement this CSS, which is very suitable for this job. try it.

 /*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