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 */ 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) ) { 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
- 28. November 2024 -- Animierte Tabellen Sortierung (10)
Aufgrund einer Frage bei meinem alten Tabellensortierer-Skript...
- 18. November 2011 -- LED Editor (1)
LED Scroller Chareditor Dieses Skript dient zum...
- 13. Mai 2009 -- String Erweiterungen (5)
Eine der Eigenschaften von Javascript, die sie von...
5354 mal gelesen.
24 Kommentare
direkt zum Formular »
Seiten:
26. Juni 2009: 23:58
Hallo,
kann es sein das sich dieses Script nicht mit deinem Script zum sortieren von Tabellen verträgt?
27. Juni 2009: 0:08
im gegenteil, die sollten zusammen arbeiten.
27. Juni 2009: 3:00
Hmm, ich verliere dadurch nämlich die Sortierfunktion. Zu sehen hier:
http://skamander.sk.funpic.de/Sortable/test.html
27. Juni 2009: 11:00
Du benutzt nicht mein Sortierskript, das was du hast ist im längen langsamer.
Das was du da hast wird wohl nicht mit dem Zebraskript zusammen arbeiten. Aber das Grundproblem ist, dass du window.onload nur einmal verwenden kannst.
27. Juni 2009: 15:24
Das ist mir jetzt richtig peinlich! Jetzt da ich die richtigen Scripte eingebunden habe klappt es wunderbar. :)
Vielen Dank für die Hilfe.
13. Juli 2009: 11:45
Hi,
erstmal vielen Dank, das hier ist echt super. Ich habe allerdings ein kleines Problem-> ich habe mit Zebra Skript das gleiche Problem, wie wenn ich das manuell als class ein den html source schreibe -> nach dem Sortieren wird das Zebra scheckig.
Wie erreiche ich denn, dass nach dem Sortieren das Zebra frisch angemalt wird?
Habs selbst versucht, hab aber sogut wie keine Erfahrung mit Javascript.
Grüße
13. Juli 2009: 12:09
Mein Tabellensortierskript macht das.
23. Juli 2009: 21:22
Verstehe ich dich richtig das nach dem sortieren kein richtiges Zebra-Muster vorhanden ist, sondern alles durcheinander?
Wenn ja, dann könnte es daran liegen das deine Zeilen schon Farben zugewiesen haben. War zumindest bei mir so. Wenn Du diese entfernst, und dann halt im CSS etwas wie:
tr.odd td {background-color: #B3B3B3}
23. Juli 2009: 21:22
…schreibst, dann sollte es funktionieren. :)
23. September 2009: 0:40
Hallo Struppi,
ich benutze bei einer meiner Tabellen sowohl dein Skript zum sortieren der Tabelle, als auch das Zebra-Skript. Funktionieren beide einwandfrei und sind schnell wie Schmidts Katze. :) Nun zu meinem Problem: ich habe in jeder Tabellenzeile eine Checkbox mit der man die jeweilige Spalte auswählt (alles zwischen tr und /tr, nicht das ich mich schlecht ausdrücke).
Dafür habe ich mir ein kleines Javascipt geschrieben welches mir die Spalte einfärbt. Der Aufbau davon ist folgender:
[CODE]
function SetColor(id){
if (document.getElementById(id).className == ‚unselected‘) {
document.getElementById(id).className = ’selected‘;
}
else {
document.getElementById(id).className = ‚unselected‘;
}
}
[/CODE]
Das Problem dabei ist das dein Zebrascript auch die Klasse der ausgewählten Felder ändert. Da ich gestern erst mit Javascript angefangen habe war es mir bisher nicht möglich dein Script so zu ändern das es nicht mehr passiert. Wie muss ich da rangehen um das zu schaffen?
Gruß
Flor1an
23. September 2009: 9:16
Du meinst die Reihe, nicht Spalte.
Das sollte eigentlich kein Problem sein. Bzw. musst du evtl. dein Skript ändern und zwar so, dass die Klassenbezeichnung hinzugefügt wird.
document.getElementById(id).className += ’ selected’;
23. September 2009: 14:25
Vielen Dank,
jetzt funktioniert es. Ich musste zu deinem Code allerdings noch ein:
else if (document.getElementById(id).className == ‚odd‘) {
document.getElementById(id).className = ’selected‘;
}
einfügen, damit auch die schon gestreiften reihen beim anklicken der Checkbox markiert werden. Sonst sind sie immer in der Zebrafarbe geblieben.
Eine Frage hätte ich da noch – ich hoffe das ins ok wenn ich sie hier stelle. Du hast ja eine Funktion eingebaut die eine Spalte (diesmal meine ich auch eine Spalte, danke für die Korrektur :-)) beim laden einer Seite vorsortiert. Einmal verstehe ich diese nicht, und zum anderen würde es mich interessieren ob die vorsortierte Spalte auch gestreift wird sofern man das Zebrascript verwendet.
Gruß
Florian
23. September 2009: 14:45
Du musst einfach, die init() Funktion erweitern:
SortTable.init().forEach( function(el) {el.sort(spalte); });
Wobei der IE <7 kein forEach() kennt, das muss dann nachgerüstet werden. Die Spalte kriegt kein Zebramuster, aber die Reihen schon.
23. September 2009: 15:03
Danke schonmal das Du dir die Zeit nimmst und meine Fragen beantwortet hast.
Asche über mein Haupt, schon wieder hab‘ ich Spalte geschrieben. :(
Eine letzte Frage hätte ich noch: wie gebe ich an welche Spalte vorsortiert wird? Sorry für die Laeinhafte Frage, PHP ist für mich einfacher zu verstehen als Javascript.
23. September 2009: 15:09
spalte ist ein Platzuhalter oder ein Variabel, du kannst da entweder schreiben:
var spalte = 5;
oder direkt anstatt spalte die Nummer eingeben:
SortTable.init().forEach( function(el) {el.sort(5); });
23. September 2009: 15:12
Ach so, vielen Dank.
Einen schönen Tag wünsch ich noch, und vielen Dank nochmal für die Hilfe. :)
Gruß
Florian
11. Dezember 2009: 14:41
Ich bekomme dein Script leider nicht zum Laufen.
In einer einfachen Seite (HTML 4 Strict) habe ich eine wohlgeformte Tabelle mit Head, Foot und Body. Im head dieses Dokuments verweise ich auf
Die css-Datei enthält nur unten stehenden Code, die zebratabelle.js dein Script.
.odd {
background-color: red;
}
Hast du einen Tipp?
Danke
Pede
14. Dezember 2009: 11:47
Du musst die init Funktion aufrufen, z.b. onload oder im HTML Code vor dem schliessendem body-Tag
16. Dezember 2009: 19:25
Hallo!
Vielleicht hast Du einen guten Vorschlag:
Wie könnte ich denn am geschicktesten die Zebratabelle auf eine Klapptabelle (ist nicht Deine – sorry) anwenden, dass von den dargestellten rows nur die sichtbaren (wenn eingeklappt) regelmäßig gestreift sind?
lg tipi
17. Dezember 2009: 8:26
Ohne Kenntniss wie diese Klapptabelle arbeitet läßt sich das nicht sagen. Du müßtest aber so oder so das Skript individuell anpassen.
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!
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.
1. Juni 2010: 7: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??
1. Juni 2010: 8:00
Weiß ich nicht, ich kann leider nicht hellsehen.