Tim Adler

Tabellenlayout per CSS ist immer noch etwas rudimentär: Standardfunktion wie das abwechselnde Auszeichnen von Zeilen, oder abweichende Anfangs- und Endzellen werden nicht ausreichend weit unterstützt. Es gibt lediglich die Möglichkeit per manuellem Skript entsprechende Zeile mit anderen Klassen zu belegen.

Der gemeine Backendler würde dazu übergehen und solche Dinge über eine Änderung in seinen Skripten durch passende Klassen herbeiführen. Das birgt gleich zwei Probleme...

1. Templates, die man gestaltet sehen noch nicht so aus, wie sie eigentlich sollte, weil die Unterstützung für Backend-Skripte fehlt.
2. Man muss diese Änderung in jedem Backend-Skript durchführen.

Da muss eine bessere Lösung her... Die sieht  ähnlich aus, wie die bereits vormals beschriebene JavaScript Behaviour Injection. Man bastelt sich ein JavaScript, was die Markierung der Tabelle vornimmt. 

Damit hat man eigentlich beide obigen Probleme bereits gelöst: Zum einen sind sämtlich Frontend-Arbeiten auch wirklich im Frontend passiert, d.h. Aussehen und Seitenverhalten sind auch dort gemacht, wo man sich da vorstellt, und zum anderen müssen keinen zusätzlichen Backendänderungen nur für das Aussehen vorgenommen werden.

Wie sieht das ganze nun aus? Nun eigentlich gar nicht kompliziert. Es kommt in der aktuellen Version sogar ohne Frameworks aus: 

function init()
{
	//Tabellenzeilen markieren
	var tables = document.getElementsByTagName("table");
	for (var j=0; j<tables.length; j++){
		
		var table = tables[j];
		var thead = getChildsByTagName(table, 'thead')[0];
		if(thead) markTableRows(thead);		
		
		var tbody = getChildsByTagName(table, 'tbody')[0];
		if(tbody) markTableRows(tbody);
	}
}
window.onload = init;

Hier durchläuft man erst einmal ganz simpel alle Tabellen, die überhaupt auf der Seite vorkommen können. Für jede Tabelle führt man zwei Aufgaben aus: Markieren alle Zeilen im Head und Body. Sieht komisch aus, aber die Browser halten sich an das übliche DOM-Modell, in dem jede Tabelle diese beiden Bereiche hat. Sollten Sie nicht explizit angegeben sein, werden alle Zellen in den tbody gepackt.

Die Hilfsfunktion getChildByTagName ist auch nicht sonderlich magisch:

function getChildsByTagName(element, tagName)
{
	var childs = [];
	
	for(var j = 0; j < element.childNodes.length; j++)
	{
		if(element.childNodes[j].nodeName.toLowerCase() == tagName.toLowerCase())
		{
			childs.push(element.childNodes[j]);
		}
	}
	
	return childs;
}

 
Man kann diese Funktion noch für andere tolle Dinge einsetzen, aber hier brauchen wir sie nicht für mehr.

Die Funktion markTableRows übernimmt nun das markieren von geraden und ungeraden Zeilen, damit man diese später per CSS stylen kann:

function markTableRows(tableElement)
{
	var trs = getChildsByTagName(tableElement, 'tr');
	for(var j=0; j<trs.length; j++)
	{
		tr = trs[j];
		tr.className += j % 2 == 0 ? ' odd' : ' even';
		
		if(tableElement.nodeName.toLowerCase() == 'tbody')
		{
			markTableCells(tr);
		} else
		if(tableElement.nodeName.toLowerCase() == 'thead')
		{
			markTableCells(tr,'th');
		}
	}	
}

Dabei sollte man folgende Kleinigkeit beachten: Der className einer Zeile wird nicht überschrieben, sondern die jeweilige Zeilenklasse wird nur als zweite Klasse angehängt. So kann man Zeilen zusätzlich noch eigene Klassen geben, die durch das JavaScript nicht überschrieben werden. Die Browser kombinieren zwei oder mehr Klassenangaben in einem Element zu einem gemeinsamen aussehen. So kann man z.B. auch problemlos für Kombination von aussehen und Verhalten (JSBI, s.u.) sorgen: z.B. <input class="large clear" ...>

Die letzte Funktion im Script markiert Zellen auf eine ähnliche Art um letztendlich abhängig von deren Funktion in der Tabelle Stylen zu können.

function markTableCells(tableRow,cellType)
{
	if(!cellType) cellType='td';

	var tds = getChildsByTagName(tableRow, cellType);
	for(var j=0; j<tds.length; j++)
	{
		td = tds[j];
		if(j == 0) td.className += ' first';
		if(j == (tds.length-1)) td.className += ' last';		
	}	
}

Hier könnte man sich auch noch andere Markierungen vorstellen, aber mir sind erstmal keine besseren eingefallen.

Für alle Interessierten, hier das Skript nochmal als Download.