Klapptabelle mit Javascript
Ziel des Skriptes ist es, grosse Datentabellen übersichtlicher darzustellen. Eine Möglichkeit dazu ist z.b. Zeilen, die weiter gehende Informationen zu einem Oberbegriff enthalten, mit einem Javascript zu verstecken und nur dann anzuzeigen, wenn der Benutzer auf ein entsprechendes Symbol klickt. Ich habe das aufgrund einer Frage, in einem Forum, Klapptabelle genannt.
Die Tabellen werden dazu im HTML Code, mit der CSS Klasse klapptabelle
markiert. Die Zeilen, die den Oberbegriff darstellen, werden jeweil mit der Klasse main
markiert.
Die init()
Funktion des Skripts durchsucht die entsprechenden Tabellen und blendet alle Zeilen aus, die nicht das Attribut der Klasse main
zu gehören. Ausserdem fügt es automatisch ein anlickbares Grafiksymbol in die erste Zelle ein, die den Zustand der Zeilen anzeigt.
Beispiel
Durch einen Klick auf die Pfeile in den Zeilen, werden die zusätzlichen Informationszeilen ein- bzw. ausgeblendet.
Inhalt | Info | |
---|---|---|
In dieser Zeile gibt es nichts zu klappen | ||
Hier sind 3 Zeilen versteckt | ||
Inhalt Zeile 1 | Info | |
Inhalt Zeile 2 | Info | |
Inhalt Zeile 3 | Info | |
Hier ist nur eine Zeile - Reihe ist geöffnet | ||
Inhalt 1 zeile | Info | |
3 Zeilen | ||
Inhalt 1 | Info | |
Inhalt 2 | Info | |
Inhalt 3 | Info | |
In dieser Zeile gibt es nichts zu klappen | ||
Noch eine Zeile, die beim laden geöffnet ist. | ||
Inhalt | Info | |
Inhalt | Info | |
Zeile | ||
Inhalt 1 | Info | |
Inhalt 2 | Info | |
Inhalt 3 | Info | |
Noch eine Zeile | ||
Inhalt | Info | |
Inhalt | Info | |
Zeile | ||
Inhalt 1 | Info | |
Inhalt 2 | Info | |
Inhalt 3 | Info |
Zusatzfunktionen für das Beispiel
Vor dem öffnen einer Reihe, alle anderen schliessen.
Der HTML Code
CSS Klassen
Die Tabellenreihe unter der auf- und zugeklappt wird, muss die CSS-Klasse main
haben und in einer Tabelle, mit der Klasse klapptabelle
stehen.
Zusätzlich können Reihen durch die Klasse open
markiert werden, die nach dem Laden geöffnet sein sollen.
Der HTML Code könnte, Beispielsweise so aussehen:
<table class="klapptabelle"> <!-- Diese Reihe wird disabled, da es keine Reihen zum klappen gibt --> <tr class="main"> <td> </td> <td> </td> </tr> <tr class="main"> </tr> <!-- Die Reihen die durch einen Klick auf das Bild geklappt werden --> <tr> <td> </td> <td> </td></tr> <tr> <td> </td> <td> </td></tr> <tr> <td> </td> <td> </td></tr> </table>
Download
Die Datei klapptabelle.js ist notwendig (z.b. im Header einbinden).
Und die Datei mit den Bildern bilder/pfeile.gif.
Die Bilder sind in Form eines CSS Sprites gespeichert. Das sieht so aus:
Javascript
Um die Funktionalität zu starten, muss entweder im HTML Code hinter den Tabellen (z.b. vor dem schliessenden body-Tag) oder im onload
-Event der Seite, folgender Code aufgerufen werden:
KlappTabelle.marker = 'pfad/zu/bildern/pfeile.gif'; // <-- Wichtig KlappTabelle.init(); |
Hier muss man aufpassen, dass das Bild gefunden wird. Also, ob der Pfad relativ zum HTML Dokument richtig angegeben wurde. Falls das Bild nicht gefunden wird, gibt das Skript eine Fehlermeldung aus.
Optional kann dem init()
Aufruf noch eine Callback-Funktion als Parameter übergeben werden. Damit lassen sich noch Zusatzfunktionen einbauen, wie in der obigen Beispieltabelle. Dort werden in der Callback Funktion die Events für die Buttons gesetzt, die dann die entsprechende Funktion für die Tabelle aufrufen:
KlappTabelle.marker = '/js/bilder/pfeil-zu.gif'; KlappTabelle.init(setEvents); // Das ist die Callback Funktion die aufgerufen wird, // wenn eine Klapptabelle gefunden wird function setEvents(klapptabelle){ // Event für den Button <alle Schliessen> document.getElementById('closeAll').onclick = function() { klapptabelle.hideAll(); }; // Event für den Button <alle öffnen> document.getElementById('showAll').onclick = function() { klapptabelle.showAll();}; klapptabelle.onopen = function(p, row) { this.doCloseAll = document.getElementById('close').checked; row.style.background ='#ff0' }; klapptabelle.onclose = function(p, row){ row.style.background ='' }; } |
Erläuterung
Zuerst wird die Funktion KlappTabelle.init()
aufgerufen, dabei wird die Referenz auf die Funktion SetEvents()
übergeben. Jedesmal wenn eine Tabelle initialisiert wurde, wird diese Funktion aufgerufen, dabei wird ihr als Parameter das KlappTabelle
Objekt übergeben.
Die Funktion setEvents()
macht nun folgendes:
- Dem Button mit der ID
close
wird ein onclick Event hinzugefügt, dieser ruft die FunktionhideAll()
des Parametersklapptabelle
auf. - Das Objekt
klapptabelle
verarbeitet zwei Events:
onopen
: dieser wird aufgerufen, wenn eine Reihe geöffnet wird.
onclose
: dieser wird aufgerufen, wenn eine Reihe geschlossen wird.
Beiden Funktionen wird das KlappTabelle-Objekt und die Tabellenreihe übergeben.
Das KlappTabelle Objekt
Das Objekt hat folgende Funktionen:
hideAll()
Alle klappbaren Reihen werden geschlossen.
showAll()
Alle klappbaren Reihen werden geöffnet.
.doCloseAll
Diese Eigenschaft bestimmt, ob beim öffnen einer Reihe, alle bereits geöffneten Reihen vorher geschlossen werden. Die Eigenschaft kann den Wert true
oder false
haben.
Download
Die Bilder: pfeile.gif
Die JS Datei: klapptabelle.js
ähnliche Artikel
- 28. November 2007 -- Tabellen sortieren (221)
Das Skript macht eine HTML-Tabelle sortierbar. Die...
- 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...
13755 mal gelesen.
47 Kommentare
Leave a comment »
Seiten:
31. Oktober 2008: 9:17
[…] AW: Tabellenzeile verstecken und mit Javascript aufrufen? – Heute, 09:17 Ich sch
31. Oktober 2008: 11:20
[…] AW: Tabellenzeile verstecken und mit Javascript aufrufen? – Heute, 09:17 Ich sch
31. Oktober 2008: 16:54
[…] AW: Tabellenzeile verstecken und mit Javascript aufrufen? – Heute, 09:17 Ich sch
3. Februar 2009: 17:03
[…] ausblenden – Heute, 17:03 @ Neuer Neuling Moin! Vielleicht hilft Dir dieser Link weiter! Klick MfG Intelligenz ist die F
25. Januar 2010: 9:14
Hallo!
Ist es mit diesem Skript auch möglich, Tabellen in mehreren Ebenen zu klappen, um eine Art Baumstruktur zu erstellen?
Ansonsten sieht das sehr gut aus, ich benutze auch schon die Sortiertabelle, vielen Dank dafür!
27. September 2010: 10:37
Hallo!
Erstmal vielen Dank für das tolle Script, nach sowas hab ich lange gesucht!
Eine Frage dazu hätte ich. Und zwar möchte ich das mit Deinem Script für die Sortiertabelle kombinieren. Klappt auch soweit.
Allerdings werden ALLE Zeilen sortiert, ich möchte aber, dass die Zeilen, die in der Klapptabelle als Unterelemente verwendet werden (die tr´s OHNE class=“main“) NICHT mitsortiert werden. Die sollen einfach ignoriert werden, da für mich in der Klapptabelle nur die übergeordneten tr´s im zusammen geklappten Zustand sortiert werden sollen.
Wie kann ich Deine beiden Scripte am besten kombinieren? Hast Du mir evtl einen Tipp? Ich hab´s auch schon mit tfoot probiert, aber dann stehen die Zeilen natürlich am Ende der Tabelle und nicht mehr schön dazwischen.
Danke Dir für Deine Mühe!
27. September 2010: 14:05
Dazu müßte das Sortierskript umgeschrieben werden. Ich vermute auch mit einigen Aufwand, da ja die einzelnen Reihen zusammenhängen. Insofern muss ich dich entäuschen, es geht nicht.
27. September 2010: 15:24
Hallo Struppi,
mhhh, das ist aber Schade, weil die beiden Skripte echt super sind und in Kombination wärs echt genial.
Würdest Du dir zutrauen, das ganze zu kombinieren? Auch entgeltlich? Falls ja, schick mir doch einfach ne Mail (hast Du ja … )
11. Februar 2011: 10:01
hallo struppi
erstmal besten dank für diesen super script ;)
ich versuche verzweifelt herauszufinden, wie sich beim öffnen der seite eine bestimmt zeile bereits als „geöffnet“ darstellen lässt.
bsp.: die tabelle hat 10 zeilen – beim öffnen sollte jedoch die 5. zeile schon geöffnet sein, die anderen jedoch geschlossen bleiben.
ich wäre für eine rasche antwort sehr dankbar.
besten dank im voraus
gruss hardy
11. Februar 2011: 12:57
Ist jetzt eingebaut. Die Reihe, die am Anfang geöffnet sein soll, bekommt zu der Klasse
main
noch die Klasseopen
.11. Februar 2011: 14:08
super sache – besten dank
klappt prima ;)
18. Februar 2011: 20:07
hallo,
hab das so bei mir eingebunden aber es geht nicht!
was könnte ich denn falsch gemacht haben?
gruß
18. Februar 2011: 20:28
Weiß ich nicht. Du müßtest schon konkreter werden, z.b. die Seite zeigen.
18. Februar 2011: 21:56
also ich habe in ein html dokument mit tabelle alles wie oben beschrieben eingefügt, wenn ich die seite nune öffne zeigt es alle reihen an, also auch die die erst noch geöffnet werden sollen, und es zeigt auch die pfeile nicht an. habe das pfeile.gif im gleichen ordner wie die seite, und deshalb einfach KlappTabelle.marker = ‚pfeile.gif‘; gesagt. könnte da der fehler liegen?
18. Februar 2011: 22:09
Das klingt eher nach einem anderen Problem. Hast du mal in die Fehlerkonsole geschaut (Im Firefox z.b.im Menü Extras)
18. Februar 2011: 22:23
nein, nutze leider ie.
hab hier mal meine quellcode:
…
offen
sdfsdf sdfsdf
sdfsdf sdfdsf
sdfsdfsdf sdfsdfsdf
KlappTabelle.marker = ‚pfeile.gif‘;
KlappTabelle.init();
hab ich da irgendwo nen fehler drin?
18. Februar 2011: 22:29
Du kannst hier in den Kommentaren kein HTML Code eingeben (nur die erlaubten, die direkt über dem Eingabefeld stehen). Auch der IE zeigt Fehler an, google mal nach Fehlerkonsole im IE oder so
18. Februar 2011: 22:35
ich habe ihnen gerade mal meine datei als email geschickt, vllt könnten Sie es sich mal anschauen.
18. Februar 2011: 22:37
tut mir leid wenn ich nerve.. die e-mail adresse aus dem impressum geht nicht?!
18. Februar 2011: 22:08
Danke für den Hinweis. Die ist wohl bei einem Umzug flöten gegangen. Und ich merk grad, dass die Uhrzeit im Blog noch auf Sommerzeit stand. Ich werd‘ nachlässig :-)
Die Mailadresse geht jetzt.
18. Februar 2011: 23:13
Du hast zweimal eine CSS Klasse vergeben, das geht nicht so. Schreib: class=“klapptabelle layout1″
19. Februar 2011: 10:32
super, es funktioniert, danke!!!
27. Februar 2011: 9:45
Hallo,
ist es möglich, dass beim Aufruf mehrere Zeilen aufklappen werden? Bei mir wird immer nur die „letzte“ mit der zusätzlichen Klasse open anufgeklappt. Diese Erweiterung wäre wirklich praktisch (und konsequent ;) )
Vielen Dank,
Grüße Johannes
27. Februar 2011: 10:43
Ich verstehe nicht so ganz, was du meinst.
Was heißt „beim Aufruf“? Du kannst doch im Prinzip gar nichts aufrufen, da das Skript die Eventhandler installiert, die sich dann um den Rest kümmern.
Und was meinst du mit „mehrere Zeilen aufklappen“, das ist der Sinn und Zweck dieses Skript, dass mehrere Zeilen aufklappen.
27. Februar 2011: 11:47
Ich hab mich vieleicht unklar ausgedrückt:
Es besteht ja mittlerweile die Möglichkeit, dass man mit der zusätzlichen Klasse open in einer main-Zeile definieren kann, dass die gesamten, darunter befindlichen Zeilen beim Öffnen (=Aufruf) der Seite bereits aufgeklappt sind. Das funktioniert soweit auch gut. („11.02.2011 – * Mot ‚open‘ markieren der Reihe, die per default geöffnet sein soll.“
Ich würde aber beim Öffnen der Seite (per default) gerne zwei (oder mehrere) Reihen öffnen können.
Hier nochmal ein Code-beispiel:
[...]
Diese Zeilen sollen beim Öffnen der Seite geöffnet sein
Inhalt
Info
Diese Zeilen ebenfalls
Inhalt 1
Info
Es werden leider nicht beide mit „open“ markierten Reihen geöffnet, sondern nur die Unterste. Ich hoffe es war nun verständlicher…
Beste Grüße,
Johannes
27. Februar 2011: 11:51
Den Code-Beispiel zeigt es nicht korrekt an (ich dachte nicht erlaubt heißt, dass sie einfach als Text dargestellt werden): http://nopaste.eisscholle.net/index.php?id=c7184d8616
Beste Grüße,
Johannes
28. Februar 2011: 10:40
Ist ein eingebaut.
1. März 2011: 7:37
Hallo struppi,
vielen Dank für die Implementierung. Leider unterstütz der IE „foreach“ erst ab der zukünftigen Version 9 – kannst du da noch was machen? Unter FF klappts super!
Vielen Dank,
beste Grüße,
Johannes
1. März 2011: 13:35
Einfach den folgenden Code noch einbinden:
if (!Array.prototype.forEach ) {
Array.prototype.forEach = function(fun )
{
var len = this.length;
if (typeof fun != "function")throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) if (i in this) fun.call(thisp, this[i], i, this);
};
}
19. April 2011: 6:27
Vielen Dank für den Code!
Funktioniert einwandfrei.
Gruß,
TobAd
28. April 2011: 15:11
Hallo,
funktioniert das Ganze auch mit geschachtelten Tabellen? (also d.h. die äußere Tabelle soll klappbare Zeilen enthalten und diese Zeilen enthalten auch wieder klappbare Tabellen).
Ich habe es probiert, aber es scheint nicht so richtig zu funktionieren.
Ich habe allen Tabellen die Class „klapptabelle“ gegeben und den entsprechenden Zeilen wie oben beschrieben die Class „main“.
Viele Grüße
28. April 2011: 16:40
Du meinst eine zweite Ebene? Nein, dafür ist das Skript nicht auslegt.
2. Mai 2011: 10:38
Hallo,
habe das Skript bei mir eingebunden und läuft auch super, allerdings fände ich es nicht schlecht, wenn ich auf den Text, der jeweils in der ersten Zelle (also quasi hinter dem Bild mit dem Pfeil) steht, auch einen Link (onklick) drauflegen könnte, dass er auch dann immer auf- und zuklappt.
Kann ich dies auch über das Script erreichen?
Gruß
Christian
2. Mai 2011: 11:22
Nein, auch das geht nicht.
Das Skript ist extra so geschrieben worden, damit möglichst wenig direkt im HTML Code eingefügt werden muss. Daher werden die Elemente erst dynamisch vom Skript eingefügt.
Um dies mit einem bereits vorhandenes Element umzusetzen, müßte das Skript deutlich komplexer sein.
11. Mai 2011: 22:41
Hey Struppi,
Die letzte Zeile meiner Tabelle hat keinen versteckten Inhalt, ich schliesse also die Tabelle mit einem (tr class=’main‘)(/tr) ab.
(table class=’Klapptabelle‘)
(colgroup)
(col width=’15%‘ …
…
(/colgroup)
(tr)
(th scope=’col‘) Titelzeugs … (/th)
…
(/tr)
(tr class=’main‘)
(td) …
… (/td)
(/tr)
(tr class=’main‘)
(td) …
… (/td)
(/tr)
(/table)
Dennoch offeriert die letzte Zeile der Tabelle im Browser (IE, FF, Safari) die Möglichkeit aufzuklappen – worauf allerdings (und richtigerweise) nichts aufklappt.
Danke…
12. Mai 2011: 7:46
Danke, das war ein Bug. Jetzt klappt’s ;-)
25. Mai 2011: 7:53
Hallo Struppi!
Habe 2 und mehr getrennte Tabellen auf einer Seite, die über das Skript gesteuert werden sollen. Funktioniert im FF auch einwandfrei, der IE8 macht aber nur die erste Tabelle „klappbar“. Jede weitere Tabelle ist geöffnet – ohne Steuermöglichkeit und ohne Grafiken.
Gibts da ein Workaround oder eine Möglichkeit, mehrere Instanzen der Tabellen zu öffnen (z.B. KlappTabelle1.init();, KlappTabelle2.init();)?
Danke für das tolle Skript und beste Grüsse.
25. Mai 2011: 8:21
Hello world!
Ich bins nochmal: Wer lesen kann ist im Vorteil
Kommentar 25 befolgen und schon gehts auch im IE8 mit mehreren Tabellen:
if (!Array.prototype.forEach ) {
Array.prototype.forEach = function(fun )
{
var len = this.length;
if (typeof fun != "function")throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) if (i in this) fun.call(thisp, this[i], i, this);
};
}
21. Dezember 2011: 16:59
Hallo,
ich hab den code eingebunden und die versteckten Zeilen lassen sich auch durch Klick auf den Button ein-/ausblenden. Allerdings wird die aktive Zeile nicht andersfarbig unterlegt und auch die zusätzliche Klasse open, mit der ich eine Zeile beim Öffnen aufklappen möchte, funktioniert nicht.
Was ist da nicht richtig?
Mein Code sieht so aus:
Bitte, lade hier nicht den ganzen HTML Code ab, dafür ist die Kommentarfunktion von WordPress nicht geeignet. Wenn du eine Frage/Problem hast, dann verlinke zu einer Beispielseite, damit ich mir das ansehen und ausprobieren kann.
Danke!
Struppi
22. Dezember 2011: 17:12
Hallo,
sorry – das mit dem Code war mir nicht bekannt.
In der Beispielseite kann ich nur die Tabelle sehen. Das Klappen funktioniert da gar nicht. Hier der Link dazu: http://beispiel.tm-erlebniskochen.de/
22. Dezember 2011: 17:22
Hallo,
ich bins noch mal. Ich hab die Tabelle noch ein wenig verändert. Jetzt klappt sie zwar, aber die aktive Zeile wird nicht andersfarbig dargestellt. Wie kann ich doallclose einbinden?
22. Dezember 2011: 19:15
Ich habe das im Beispiel mit den Tabellen Events gemacht. Was ich aber nicht mehr elegant finde, daher habe ich das Skript leicht erweitert und eine CSS Klasse eingeführt. Du kannst die Tabellenreihe, die geöffnet ist, z.b. so einfärben
table.klapptabelle tr.open {
background-color:green;
}
Die Eigenschaft doCloseAll kann z.b. so gesetzt werden:
function setEvents(klapptabelle) {
klapptabelle.doCloseAll = true;
};
30. Januar 2013: 16:10
Hallo
Tolle Arbeit. Ich versuche gerade JS zu lernen und Dein Projekt hilft mir sehr.
Habe es auserkoren, das verwirrende an JS zu verstehen.
Bin Delphi Programmierer und JS ist so anders.
Es gibt ein paar Sachen an KlappTabelle die ich absolut nicht verstehe, darf ich damit nerven ?
30. Januar 2013: 18:29
Klar.
23. April 2014: 8:30
Gibt es irgendwo eine Seite, die man sich anschauen kann?
4. August 2018: 1:57
Hallo Struppi,
danke für das Script – hat mir als JS-Unbedarften viel Zeit und Hirnschmalz erspart. Nun habe ich das Ganze zusammen mit einer ebenfalls klassenbasierten Hervorhebung von Zeilen einsetzen wollen. Das Problem dabei – Dein Script wirft alle Klassen aus den Rows hinaus.
Ich habe das Script „mal schnell“ modifiziert und in this.hide sowie this.show das Klassenhandling durch $(row).removeClass(„open“) b.z.w. $(row).addClass(„open“); ersetzt. Braucht halt nun jquery – habe halt keine Ahnung, wie ich das in JS pur zaubern kann.
4. August 2018: 8:22
Danke für deinen Kommentar und du hast natürlich absolut Recht. Damals hatte ich über solche Dinge nicht nachgedacht.
Ich habe es in der neuen Version eingebaut und die Klasse wird nur noch ergänzt bzw. ersetzt.
Es gäbe zwar auch die Möglichkeit über classList eine Klasse einzufügen oder entfernen, aber in Anbetracht des Alters des Skriptes, habe ich dies „Klassisch“ über reguläre Ausdrücke umgesetzt.
https://developer.mozilla.org/de/docs/Web/API/Element/classList
Das Neuste
Kategorien
am meisten gelesen
zuletzt kommentiert
Archiv
Wortwolke
Datenschutz Privatsphäre LED Scroller Javascript Tool Animation Drag&Drop Wordpress Bugs prototype überwachung Firefox OOP Laufschrift about:config String Browser google LED linux