Here, the javascript goes through each list item and adds a class name - '.odd' or '.even' - to each one. The style of those classes is set in the CSS.
Of course, this could be used for tables too. You'd just have to change the tag name in the function to 'tr'.
Javascript
function stripedList(list) {
var items=document.getElementById(list).getElementsByTagName('li');
for (i=0; i<items.length; i++) {
if ((i%2)?false:true) {
items[i].className+=" odd";
}
else {
items[i].className+=" even";
}
}
}
window.onload=function() {stripedList('list');};
HTML
<div id="stripedlist">
<h1>Striped list (javascript)</h1>
<p>Here, the javascript goes through each list item and adds a class name - '.odd' or '.even' - to each one. The style of those classes is set in the CSS.</p>
<p>Of course, this could be used for tables too. You'd just have to change the tag name in the function to 'tr'.</p>
<ol id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
</div>
CSS
.odd {
background-color:red;
}
.even {
background-color:blue;
}
ol#list {
width:7em;
margin:auto;
list-style:none;
text-align:center;
}
ol#list li {
height:1.5em;
line-height:1.5em;
color:white;
font-weight:bold;
}