Month: May 2007

Zebra-Tabellen scheinen sowas wie ein Steckenpferd von mir zu sein. (s. hier und hier) CSS3 ist leider immer noch nicht weiter vorangekommen. Aber dafür habe ich in der Zwischenzeit Prototype für mich entdeckt. Prototype ist ein Framework für Javascript, was die Programmierung von Anwendungen in Javascript erheblich vereinfacht. Ich hatte ja schon mal hier angedeutet, daß sich mit ein wenig Javascript eine Zebra-Tabelle dynamisch — ohne extra Markup — erzeugen läßt. Das ganze endete mit ca. 20 Zeilen Javascript Code. Das gleiche mit Prototype sind weniger als 10 Zeilen. (und auch nur so lang, weil ich es lesbar machen wollte)

var ZebraTable = {
  load: function() {
    $$('table.zebra tbody > tr:nth-child(2n+1)').each(function(elt) {
      elt.addClassName('rowodd');
    })
  }
}

Event.observe(window, 'load', ZebraTable.load);

Ja, das ist alles. Wer sich den Code ein wenig genauer anschaut, wird dort einen CSS3-Seketor finden. Dieser Selektor ist jedoch komplett in Javascript innerhalb von Prototype implementiert und somit Browserunabhängig. Der Browser muß also kein CSS3 beherrschen.

Wer den Code ausprobieren möchte, muß einfach nur Prototype und den Code oben in sein HTML-Dokument einbinden. Und schon werden alle ungeraden Zeilen, die sich im Tabellenrumpf (<tbody>) einer jeder Tabelle mit der Klasse zebra befinden, mit der Klasse rowodd versehen. Nun ist es nur noch eine Sache von einfachstem CSS, diese Klasse mit einer anderen Hintergrundfarbe auszustatten.