Zebra-Tables mal wieder

Vor einiger Zeit hatte ich mal über einige Features von CSS3 geschrieben, und wie sie mir (und hoffentlich auch anderen Menschen) das Leben vereinfachen werden. Besonders die sogenannten Zebra-Tabellen sind immer ein beliebtes Thema. Eine Möglichkeit habe ich damals gar nicht in Betracht gezogen: JavaScript. Zu dem Zeitpunkt kannte ich JavaScript noch aus seiner 1.0er Inkarnation und war der Meinung, daß es nicht zu mehr als zu lästigen Pop-ups gut ist. Doch mit dem letzten AJAX-Hype habe ich mir JavaScript nochmal angeschaut und dabei festgestellt, daß es deutlich Mächtiger ist, als ich angenommen habe. JavaScript erlaubt es, sich im DOM-Tree eines HTML/XML-Dokuments zu bewegen und die Knoten dynamisch zu verändern.

Folgendes JavaScript wird alle Tabellenzeilen in einem Dokument mit even/odd-Klassen versehen (vorausgesetzt, die Tabelle trägt die Klasse zebra und die Zeilen befinden sich in einem <tbody>.

function doZebra() {
	var tables = document.getElementsByTagName("table");
	for (var x = 0; x < tables.length; x++) {
		var table = tables[x];
		if (table.className != "zebra") continue;
		var tbodies = table.getElementsByTagName("tbody");
		for (var y = 0; y < tbodies.length; y++) {
			var tbody = tbodies[y];
			var even = false;
			var trs = tbody.getElementsByTagName("tr");
			for (var z = 0; z < trs.length; z++) {
				tr = trs[z];
				tr.className += (even ? " even" : " odd");
				even = !even;
			}
		}
	}
}

window.onload = doZebra;

Das war’s schon. Ich werde mir JavaScript in nächster Zeit genauer anschauen. Und vor allem die Kommunikation über XML mit dem Server, wie sie bei AJAX benutzt wird.

Leave a Reply

Your email address will not be published.