Javascript ist Toll!

»» ««
20. November 2007 - 23:13

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:

javascript
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:

javascript
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:

  1. Dem Button mit der ID close wird ein onclick Event hinzugefügt, dieser ruft die Funktion hideAll() des Parameters klapptabelle auf.
  2. 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

Comments (44)
16223 mal gelesen.
flattr
»» ««

44 Kommentare

Hinterlasse einen Kommentar »

Seiten: 1 2 3

1. Pingback von: Tabellenzeile verstecken und mit Javascript aufrufen? - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
31. Oktober 2008: 09:17

[...] AW: Tabellenzeile verstecken und mit Javascript aufrufen? – Heute, 09:17 Ich sch

2. Pingback von: Tabellenzeile verstecken und mit Javascript aufrufen? - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
31. Oktober 2008: 11:20

[...] AW: Tabellenzeile verstecken und mit Javascript aufrufen? – Heute, 09:17 Ich sch

3. Pingback von: Tabellenzeile verstecken und mit Javascript aufrufen? - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
31. Oktober 2008: 16:54

[...] AW: Tabellenzeile verstecken und mit Javascript aufrufen? – Heute, 09:17 Ich sch

4. Pingback von: Spalten dynamisch ausblenden - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)
3. Februar 2009: 17:03

[...] ausblenden – Heute, 17:03 @ Neuer Neuling Moin! Vielleicht hilft Dir dieser Link weiter! Klick MfG Intelligenz ist die F

5. Kommentar von: Philip
25. Januar 2010: 09: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!

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

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

8. Kommentar von: Jana
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 … )

9. Kommentar von: hardy
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

10. Kommentar von: Struppi
11. Februar 2011: 12:57

Ist jetzt eingebaut. Die Reihe, die am Anfang geöffnet sein soll, bekommt zu der Klasse main noch die Klasse open.

11. Kommentar von: hardy
11. Februar 2011: 14:08

super sache – besten dank

klappt prima ;)

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

13. Kommentar von: Struppi
18. Februar 2011: 20:28

Weiß ich nicht. Du müßtest schon konkreter werden, z.b. die Seite zeigen.

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

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

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

17. Kommentar von: Struppi
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. Kommentar von: to
18. Februar 2011: 22:35

ich habe ihnen gerade mal meine datei als email geschickt, vllt könnten Sie es sich mal anschauen.

19. Kommentar von: to
18. Februar 2011: 22:37

tut mir leid wenn ich nerve.. die e-mail adresse aus dem impressum geht nicht?!

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

1 2 3

Hinterlasse einen Kommentar

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

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



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