I recently required a light-weight unobtrusive javascript to set alternating styles on <table> rows and other elements (such as <li>s or <div>s). There are some options available, but most apply only to tables and are a little bloated for my needs. Since jQuery is my javascript library of choice, I created jQuery.Alternate (minified). It's my first jQuery plugin so it's a little rough. Feel free to make whatever changes you deem necessary (GPLv3). I'd also love to hear your comments!
<style type="text/css">
.odd {
background-color:lightgray;
}
.even {
background-color:white;
}
.off {
background-color:red;
}
.on {
background-color:blue;
}
.hover {
color:red;
cursor:crosshair;
}
.selected {
font-style:italic;
}
</style>
$('#table_a tbody tr').alternate({hover:true},function(){$(this).toggleClass('selected')});
| header | header | header |
|---|---|---|
| cell | cell | cell |
| cell | cell | cell |
| cell | cell | cell |
| cell | cell | cell |
$('#table_b tbody tr').alternate({odd:'off', even:'on'});
| header | header | header |
|---|---|---|
| cell | cell | cell |
| cell | cell | cell |
| cell | cell | cell |
| cell | cell | cell |
$('#list_a li').alternate();
$('#list_b li').alternate({odd:'', even:'', hover:true});