zebraStripe

Stripes a table with pre-defined CSS properties.

Includes automatic row tracking, as well as optional row marking and/or link following.

Example

An simple example table (row tracking only):

Title	Artist
Empire Burlesque	Bob Dylan
Hide your heart	Bonnie Tyler
Greatest Hits	Dolly Parton
Still got the blues	Gary More
Eros	Eros Ramazzotti
One night only	Bee Gees
Sylvias Mother	Dr.Hook
Maggie May	Rod Stewart
Romanza	Andrea Bocelli
When a man loves a woman	Percy Sledge

A table with row marking (a selection table, click on some rows):

Title	Artist
Empire Burlesque	Bob Dylan
Hide your heart	Bonnie Tyler
Greatest Hits	Dolly Parton
Still got the blues	Gary More
Eros	Eros Ramazzotti
One night only	Bee Gees
Sylvias Mother	Dr.Hook
Maggie May	Rod Stewart
Romanza	Andrea Bocelli
When a man loves a woman	Percy Sledge

A table with row navigation, clicking on a row will follow the first link in that row:

Title	Artist
Empire Burlesque	Bob Dylan
Hide your heart	Bonnie Tyler
Greatest Hits	Dolly Parton
Still got the blues	Gary More
Eros	Eros Ramazzotti
One night only	Bee Gees
Sylvias Mother	Dr.Hook
Maggie May	Rod Stewart
Romanza	Andrea Bocelli
When a man loves a woman	Percy Sledge

File Source

Javascript:

function zebraStripe(){

// add css  -  requires include_once(), a custom include function
	if(include_once) include_once('zebraStripe.css');

// auto mark all checked boxes
					inputs = trs[j].getElementsByTagName('input');
					for(k=0;k<inputs.length;k++){
						if(inputs[k].type.match(/\bcheckbox\b/)){
							if(inputs[k].checked){
								trs[j].setAttribute('marked',true);
							}else{
								trs[j].removeAttribute('marked');
							}
						}
					}

trs[j].onclick = function(){
						if(this.attributes['marked']){
							if(this.getElementsByTagName("td").length == 0) return false;
							// if it is highlighted already
							this.removeAttribute('marked');
							inputs = this.getElementsByTagName('input');
							for(i=0;i<inputs.length;i++){if(inputs[i].type.match(/\bcheckbox\b/))inputs[i].checked='';}
						}else{
							if(this.getElementsByTagName("td").length == 0) return false;
							this.setAttribute('marked',true);
							inputs = this.getElementsByTagName('input');
							for(i=0;i<inputs.length;i++){if(inputs[i].type.match(/\bcheckbox\b/))inputs[i].checked='checked';}
						}
					};
				}
			}
		} 
	}
}
var start = "zebraStripe"; /* STOP EDITING */ if(window.addEventListener){ /* mozilla */ window.addEventListener("load",eval(start),false);}else{ /* ie */ window.attachEvent("onload",eval(start));}

CSS:

Kieran Huggins

Kieran.ca

Recent Photos:

Currently Playing:

zebraStripe

Example

File Source