Javascript ist Toll!

Klapptabelle mit Javascript

Ziel des Skriptes ist es, grosse Datentabellen übersichtlicher darzustellen. Eine Möglichkeit dazu ist z.b. Zeilen, die weitergehende Informationen zu einem Oberbegriff enthalten, mit einem Javascript zu verstecken und nur dann anzuzeigen, wenn der Benutzer auf ein entsprechendes Symbol klickt

Dazu werden die Tabellen mit der CSS Klasse class="klapptabelle"markiert. Jede Zeile die den Oberbegriff darstellt, wird mit class="main" markiert.
Das Skript durchsucht die entsprechend markierten Tabellen und blendet alle Zeilen aus die nicht das Attribut class="main" haben. Ausserdem fügt es automatisch ein Grafiksymbol in die die erste Zelle ein, die den Zustand der Zeilen anzeigt.

Beispiel

Durch einen Klick auf die Pfeile in den Zeilen, werden die Informationszeilen ein- bzw. ausgeblendet.

Zusatzfunktionen

Vor dem öffnen einer Reihe, alle anderen schliessen.

Verwendung

HTML Code

Die Tabellenreihe unter der auf- und zugeklappt wird, muss die CSS-Klasse main haben und in einer Tabelle, mit der Klasse klapptabelle stehen.
Der HTML Code könnte z.b. 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. Diese sehen so aus:

Javascript

Um die Funktion 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 das das Bild gefunden wird, also ob der Pfad relativ zum HTML Dokument richtig angegeben wurde. Falls nicht wird eine Fehlermeldung ausgegeben.

Optional kann dem init() Aufruf, noch eine Callback-Funktion als Parameter übergeben werden. In dieser können z.b. Events gesetzt werden. Die Events der obigen Beispieltabelle werden so erzeugt:

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){

	// Den Event für den Button <alle Schliessen> setzen

	document.getElementById('closeAll').onclick = function() {

		klapptabelle.hideAll();

	};

	// Den Event für den Button <alle öffnen> setzen

	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. Diese wird jedesmal aufgerufen, nachdem eine Tabelle initialisiert wurde. Der Callbackfunktion wird 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.
   Damit werden alle offenen Reihen geschlossen.
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

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 true oder false sein.

Download

Die Bilder: pfeile.gif
Die JS Datei: klapptabelle.js