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});