Javascript ist Toll!

2. Februar 2008 - 11:32

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

  • 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...

  • 29. April 2009 -- Online Molmassen Rechner (29)

    Ein kleines Javascript aus der Welt der Chemie. Der...

Comments (24)
1256 mal gelesen.

24 Kommentare

Leave a comment »

Seiten:

1. Kommentar von: RedTuesday
26. Juni 2009: 23:58

Hallo,

kann es sein das sich dieses Script nicht mit deinem Script zum sortieren von Tabellen verträgt?

2. Kommentar von: Struppi
27. Juni 2009: 0:08

im gegenteil, die sollten zusammen arbeiten.

3. Kommentar von: RedTuesday
27. Juni 2009: 3:00

Hmm, ich verliere dadurch nämlich die Sortierfunktion. Zu sehen hier:

http://skamander.sk.funpic.de/Sortable/test.html

4. Kommentar von: Struppi
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.

5. Kommentar von: RedTuesday
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.

6. Kommentar von: DasKleineIch
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

7. Kommentar von: Struppi
13. Juli 2009: 12:09

Mein Tabellensortierskript macht das.

8. Kommentar von: RedTuesday
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}

9. Kommentar von: RedTuesday
23. Juli 2009: 21:22

…schreibst, dann sollte es funktionieren. :)

10. Kommentar von: Flor1an
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

11. Kommentar von: Struppi
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’;

12. Kommentar von: Flor1an
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

13. Kommentar von: Struppi
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.

14. Kommentar von: Flor1an
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.

15. Kommentar von: Struppi
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); });

16. Kommentar von: Flor1an
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

17. Kommentar von: Pede
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

18. Kommentar von: Struppi
14. Dezember 2009: 11:47

Du musst die init Funktion aufrufen, z.b. onload oder im HTML Code vor dem schliessendem body-Tag

19. Kommentar von: tipi
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

    20. Kommentar von: Struppi
    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.

21. Kommentar von: Lennart
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!

22. Kommentar von: Struppi
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.

23. Kommentar von: Lennart
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??

24. Kommentar von: Struppi
1. Juni 2010: 8:00

Weiß ich nicht, ich kann leider nicht hellsehen.

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful