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.