Zebratabellen mit JavaScript und CSS3

Was sind Zebratabellen: total schöne Tabellen bei denen diel Zeilen abwechselnde Farben haben. In meinem Fall unterschied sich die letzte Zeile auch ein wenig. Die Klasse contenttable wird Tabellen gegeben, die im RTE in TYPO3 erstellt worden sind.

Theretisch reicht etwas CSS mit folgenden Selektoren:

table.contenttable {
}
table.contenttable th {
}
table.contenttable td {
}
table.contenttable td:first-child {
}
table.contenttable td.first {
}
table.contenttable td:last-child {
}
table.contenttable td.last {
}
table.contenttable th p,
table.contenttable td p {
}
table.contenttable tr:nth-child(even) td {
}
table.contenttable tr.even td {
}
table.contenttable tr:last-child td {
}
table.contenttable tr.last td {
}

Ähnliche Selektoren, wie z.B. td:last-child und td.last kann man leider nicht zusammenfassen, da der IE sie dann nicht interpretiert.

Im IE7 und IE8 klappt es nur mit CSS natürlich nicht, unterstützt werden muss das Ding ja trotzdem, daher hilft etwas JavaScript:

$('table.contenttable').each( function(index, value) {
	var $s=1;  
	$(this).find("tr").each(function(){ 
		$s++; 
		if($s%2==1)  
			$(this).addClass('odd');
		else
			$(this).addClass('even');
		$(this).children('td').first().addClass('first');
		$(this).children('td').last().addClass('last');
	});
	$(this).find("tr").last().addClass('last');
});

Kommentare sind geschlossen.