Klapptabelle mit Javascript

Beispiel

Zusatzfunktionen

Immer nur eine Reihe öffnen.

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 nichts zum klappen gibt -->
<tr class="main">
<td> <td>
<td> <td>
</tr>

<tr class="main">
<td> <td>
<td> <td>
</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>

Bilder

Die Bilder liegen in einer Datei, als Sprite.
Der Ort muss angegeben werden:

KlappTabelle.marker = 'bilder/pfeile.gif'; 

Javascript

Es muss die Datei klapptabelle.js eingebunden werden (z.b. im Header).

Um die Funktion zu starten kann entweder im HTML Code hinter der Tabellen (z.b. vor dem schliessenden body-Tag) oder im onload Event der Seite, folgender Code aufgerufen werden:

KlappTabelle.init();

Optional kann hier noch eine Callback Funktion als Parameter übergeben wird, mit der man z.b. Events beobachten kann. Das obige Beispiel wird so erzeugt:

KlappTabelle.init( setEvents );

function setEvents(klapptabelle) {
    document.getElementById('closeAll').onclick = function() { klapptabelle.hideAll();};
    document.getElementById('showAll').onclick = function() { klapptabelle.showAll();};
    document.getElementById('close').onclick = function() { 
        klapptabelle.doCloseAll = this.checked;
    };
	
    klapptabelle.onopen = function(p, row) {
        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 wurd. Der Funktion 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.

.closeAll

Diese Eigenschaft bestimmt, ob beim öffnen einer Reihe alle bereits geöffneten Reihen vorher geschlossen werden. Die Eigenschaft kann true oder false sein.

Download