DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Alternate Row Shading On Table

01.07.2006
| 216 views |
  • submit to reddit
        
<script>
	function init () {
		var tables = document.getElementsByTagName("table");
		for(var i = 0; i < tables.length; i++) {
			if(tables[i].className.match(/zebra/)) {
				zebra(tables[i]);
			}
		}
	}

	function zebra (table) {
		var current = "oddRow";
		var trs = table.getElementsByTagName("tr");
		for(var i = 0; i < trs.length; i++) {
			trs[i].className += " " + current;
			current = current == "evenRow" ? "oddRow" : "evenRow";
		}
	}
</script>
<style>
	tr.oddRow { background-color:#EEEEEE; }
	tr.evenRow { background-color:#FFFFFF; }
</style>

<!-- INSERT TABLE HERE -->
<!-- Must make class of table 'zebra' -->

<script>
	init(); // Or can do a body onLoad="init();"
</script>