Zebratabellen mit Javascript
Und noch ein Tabellenskript.
Eine große Tabelle sieht schöner aus wenn die Tabellenzeilen eine abwechselnde Hintergrundfarbe bekommen. Das wird in Zukunft - irgendwann mal - mit CSS 3 möglich sein, im Moment kann das aber noch kein Browser.
Deshalb kann man sich behelfen - entweder, indem die Zeilen abwechselnd mit einer entsprechenden Klasse versehen werden oder, wenn man nicht den HTML Code aufblähen möchte, mit JS. Genau dazu habe ich dieses kleine Skript geschrieben, dass den entsprechend markierten Tabellen (wenn sie die Klasse zebra haben), den Zeilen abwechselnd die CSS-Klasse odd hinzufügt.
Das Skript sieht so aus und kann entweder direkt eingebunden werden oder in einer separaten JS Datei. Der Aufruf der Funktion ZebraTabelle.init() erfolgt entweder im onload Event oder vor dem schliessendem body-Tag.
/* |
Zebratabelle (c) 2008 J. Strübig |
http://javascript.jstruebig.de/js/zebratabelle.html |
Letzte Änderungen: |
*/ |
function ZebraTabelle(t) { |
var obj = t; |
var rows = []; |
var self = this; |
var hasBody = !!t.getElementsByTagName('tbody').length; |
var body = t.getElementsByTagName('tbody').length ? t.getElementsByTagName('tbody')[0] : t; |
var rows = body.getElementsByTagName('tr'); |
for(var i = 0; i < rows.length; i += 2) rows[i].className += ' odd'; |
} |
ZebraTabelle.init = function() { |
// Alle Tabellen des Dokuments |
var t = document.getElementsByTagName('table'); |
var r = /\bzebra\b/i; |
for(var i = 0; i < t.length; i++) { |
if(t[i].className && r.test(t[i].className) ) { |
var tmp = new ZebraTabelle(t[i]); |
} |
} |
}; |
Beispiel
| Spalte 1 | Spalte 2 |
|---|---|
| Zeile 1 - Spalte 1 | Zeile 1 - Spalte 2 |
| Zeile 2 - Spalte 1 | Zeile 2 - Spalte 2 |
| Zeile 3 - Spalte 1 | Zeile 3 - Spalte 2 |
| Zeile 4 - Spalte 1 | Zeile 4 - Spalte 2 |
Ähnliche Artikel
7891 mal gelesen.
24 Comments
Einen Kommentar hinterlassen »
Kommentare
« Zurück 1 2-
21.
von Lennart
-
-
22.
von Struppi
-
-
23.
von Lennart
-
-
24.
von Struppi
-
« Zurück 1 2Mittwoch 26.Mai 2010: 15:56
Moin
Hab da mal eine frage: Bei mir ist das Problem das es nicht gut mit der sortierung arbeitet.
Manchmal sind dann 2 gleichfarbige rows untereinander wenn ich sortiert habe!
Wie kann ich das machen das er die Zebra Funktion beim anklicken der Sortierung neu macht?
Aber danke!
Super funktionen hier!
Freitag 28.Mai 2010: 12:32
Hast du tatsächlich das Skript von hier? Weil das funktioniert bei mir ohne Probleme mit dem Zebrasript.
Es gibt aber eine ältere Version, die fehlerhaft war.
Dienstag 1.Juni 2010: 07:47
Jep habe ich. Nun funktioniert es auch. Musste da ein paar sachen ändern. Allerdings habe ich noch ein Problem:
Wenn ich die Tabelle per Prototype aus einer anderen Datei lade funktionieren weder sortierung noch zebra.
Wie kann ich das ändern??
Dienstag 1.Juni 2010: 08:00
Weiß ich nicht, ich kann leider nicht hellsehen.
Einen Kommentar hinterlassen