UW-Eau Claire Web Development Code Library

Web Development Code Library JavaScriptZebra-Striped tables

Zebra-Striped tables

Alternate row colors for tables by simply adding this script to your HTML file.. This will be applied to all tables with the class "datatable" and any id

Place this in your <head></head> region:

<script src="scripts/striping.js"></script>

Place this in the striping.js file:

-------------------

addStripingEvent(window, "load", stripe);

function stripe(){

	// don't do anything if you can't grab the body tag of the doc!
	if (document.getElementsByTagName('body')){
		
		var tables, i, rows, r;
		// get all tables
		tables = document.getElementsByTagName('table');
		
		// loop through tables
		for(i=0; i<tables.length ;i++){
			
			// if it's a dataTable then do the work
			if (tables[i].className == 'datatable'){
				// grab the id so you can get the nodes
				table = document.getElementById(tables[i].id);
				// if it worked (standards-based browser)
				if (table){
					rows = table.getElementsByTagName('tr');
					for(r=0; r<rows.length ;r++){
						if(r % 2 == 0){
							rows[r].className = 'even';
						}else{
							rows[r].className = 'odd';
						} // end if
					} // end for
				} // end if
			} // end if
		} // end for
	} // end if

}


function addStripingEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be removed");
  }
}