Gestreifte Tabelle mit JavaScript Teil 1

Jeder kennt den Effekt der gestreiften Tabelle. Sind die Zeilen abwechselnd in unterschiedlichen Farben, verliert man nicht so einfach den Überblick. Oftmals wird diese nette optische Unterstützung serverseitig (z.B.: in PHP) gelöst, aber manchmal ist es doch einfacher es mit JavaScript zu erledigen.

Doch wie macht man das nun einfach in JavaScript? Ich werde nun erklären wie das geht und einige Erweiterungen dazu geben.

Ich möchte hier kurz erwähnen, dass ich auch einige Ideen aus dem Internet habe, jedoch die Quellen nicht mehr finden kann! Sollte ich die Seite finden die mir den Anstoß gegeben hat, werde ich sie natürlich als Quelle führen!

Leider gibt es das Problem, dass CSS Eigenschaften auf der Tabellenreihe nicht ziehen. Deswegen färben wir jede Tabellendata (<td>)  einzeln.

/**
* Funktion zum streifen einer Tabelle
* @param id: Die Tabelle muss über eine ID verfügen und die wird hier übergeben
*/
function stripe(id) {
	//Variable fürs Farbwechseln
	var even = false;
	//Farbe für ungerade Zeilen
	var evenColor = "#ffffff";
	//Farbe für gerade Zeilen
	var oddColor = "#eeeeff";
	//Wir holen uns das Objekt der Tabelle
	var table = document.getElementById(id);
	//Wenn wir keine Tabelle erhalten haben, dann ist hier Ende
	if(! table) { return; }
	//Wir wollen nur den Tabllenbody streifen.
	var tbodies = table.getElementsByTagName("tbody");
	//Wichtig hier ist es, dass es laut Definition mehrere tbodys geben kann! Deswegen die Schleife
	for (var h = 0; h < tbodies.length; h++) {
		//Wir holen uns die Reihen
		var trs = tbodies[h].getElementsByTagName("tr");
		//Wir laufen eine Reihe nach der anderen durch
		for (var i = 0; i < trs.length; i++) {
			//Wir laufen nun alle Tabellendata durch
			for (var j = 0; j < tds.length; j++) {
				//Jetzt noch schnell den Hintergrund färben
				tds[j].style.backgroundColor = even ? evenColor : oddColor;
			}
			//Farbwechsel realisieren
			even =  ! even;
		}
	}
}

Ist jetzt glaube ich nicht so schwer. Deswegen werden wir diese Funktion erweitern!

Nehmen wir einmal an, wir wollen über ein PHP Script bestimmte Zellen schon vorfärben die unsere Funktion nicht ändern soll. Das heißt es sollen nur die geändert werden die keine Hintergrundfarbe besitzten.

Auch das ist noch relativ einfach gemacht. Wir müssen dazu nur eine if verzweigung vor dem färben hinzufügen

for (var j = 0; j < tds.length; j++) {
				if(!tds[j].style.backgroundColor){
					tds[j].style.backgroundColor = even ? evenColor : oddColor;
				}
			}

Das war einmal Teil I des Berichts. Im zweiten Teil zeige ich euch dann, wie man markierungen von Zeilen mit einer erweiterten Variante der Funktion realisieren kann.

Ebenso zeig ich euch eine Einfach variante mit der man auf unterschiedlichen Farben reagieren kann.

Denn leider ist es nicht möglich mit einem

if(tds[j].style.backgroundColor == "#FFFFFF")

zu vergleichen. Vor allem weil wenn man mit einem

alert(tds[j].style.backgroundColor);

Im InternetExplorer den Hexwert erhält und im FireFox einen rgb wert.
Freut euch schon auf Teil 2