Javascript ist Toll!

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.

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:

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