Clever way to Zebra Strip table rows with jQuery
Create your tables as you normally would.
In your CSS, add two classes: odd and even,
.odd {
}
.even {
background-color:#dfdfdf;
}
}
.even {
background-color:#dfdfdf;
}
Then add the following jquery code,
$(document).ready(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
});
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
});
This will automatically add the odd class to odd rows and even to even rows.
If you have multiple tables you should add a class to your <table /> elements so that the the first row is always the even class,
$(document).ready(function(){
$("table.someclass tr:odd").addClass("odd");
$("table.someclass tr:even").addClass("even");
});
$("table.someclass tr:odd").addClass("odd");
$("table.someclass tr:even").addClass("even");
});
References
[Click to add or edit comments])
Please prepend comments below including a date