template

Index :: Javascript :: Tabelle: Folding

Mit Folding bezeichnet man das Ein-/Ausblenden von untergeordneten Informationen, z.B. Textblöcke in einem Dokument, eingebettete Listen/Datenzeilen innerhalb einer Tabelle oder allgemein Kindelemente in einer Baumstruktur. Die Vorteile eines Foldings sind:
Meist handelt es sich um kleinere Listenstrukturen (z.B. aufklappbares Menü), die bereits beim Laden der Seite komplett vorliegen - wenn auch teilweise unsichtbar.
Zum Ein-/Ausblenden von Elementen siehe auch unter Hilfsfunktionen: ToggByDsp(), ToggById() oder ToggBySty().

Untertabellen ein- und ausblenden

Die folgende Demo zeigt Mitglieder der Bücherei Entenhausen. Als Sekundärinformation kann jeweils (durch Drücken des Plus/Minus-Buttons) die Liste ausgeliehener Bücher ein- und wieder ausgeblendet werden:

Donald Duck
Mickey Mouse
Dagobert Duck
Panzerknacker AG

Relevante Auszüge aus dem Quellcode:
Javascript im Header

function Toggle(id) {
  var t = document.getElementById("t"+id).style;
  var img = document.images["i"+id];
  if (t.display.length) { t.display = ""; img.src = "img/i16NodCls.gif"; } // einblenden
  else { t.display = "none"; img.src = "img/i16NodOpn.gif"; } // ausblenden
}


Weiter unten, im BODY, eine Zeile der Haupttabelle
(die zunächst unsichtbare Bücherliste ist blau markiert):

<tr bgcolor='#FFFFFF'>
<td valign='top'><img name='i1' src='img/i16NodOpn.gif' style='CURSOR:pointer' onClick='Toggle(1)'></td>
<td><b>Donald Duck</b><br>
<table id='t1' bgcolor='#C0C0C0' cellspacing='1' cellpadding='2' style='DISPLAY:none'><tr>
<td bgcolor='#E0E0E0'>1</td>
<td bgcolor='#FFFFFF'>Der Garten und seine Jahreszeiten</td>
</tr><tr>
<td bgcolor='#E0E0E0'>2</td>
<td bgcolor='#FFFFFF'>Wie werde ich Million&auml;r?</td>
</tr></table></td>
</tr>

Baumstruktur (Treeview)

Die Funktionalität einer Baumstruktur ist mithilfe des Style-Attributes DISPLAY und verschachtelten blinden Tabellen vergleichsweise einfach zu realisieren.
Schwierig ist jedoch oft das Layout, besonders wenn die (gepunkteten) Verbindungslinien unabhängig von der Schriftgröße ordentlich aussehen sollen. Hier hilft eine Kombination von Images und Hintergrundbildern.
Die Verwendung verschiedener Untertabellen (die wir ohnehin für das individuelle Ein/Ausblenden benötigen) garantiert ausserdem, dass sich die Zeilen bzgl. ihrer Zellenbreiten untereinander nicht beeinflussen. Mit einer einzigen Tabelle wäre das korrekte Ausrichten von Icons und Text nahezu unmöglich.

Eine simple Demo:

Sehenswürdigkeiten in der Region

Die zugrundeliegende Struktur (Tabelle Zelle):

Sehenswürdigkeiten in der Region
Bärental
Forellenteich
Grillhütte
Entenhausen
Stadtpark
Naturkundemuseum
Pfadfinderheim Wieselschweif
Geldspeicher Duck
Gansdorf
Heimatkundemuseum
Gansdorfer Forst

Relevante Auszüge aus dem Quellcode:
Javascript im Header

function TvToggle(id) {
  var o = document.getElementById(id = "tv"+id);
  var n = o.style.display.length? 1: 0;
  document.images["i"+id].src = "img/i16tvFo"+n+".gif";
  o.style.display = n? "": "none";
}


Weiter unten, im BODY, der Bereich 'Bärental':

<table cellspacing='0' cellpadding='2'>
<tr height='24' style='CURSOR:pointer' onClick='TvToggle(11)'>
<td background='img/i20tvN.gif'><img src='img/i1Spc.gif' width='16'></td>
<td><img name='itv11' src='img/i16tvFo0.gif'></td>
<td>Bärental</td>
</tr></table>

<table id='tv11' cellspacing='0' cellpadding='2' style='DISPLAY:none'><tr height='24'>
<td background='img/i20tvV.gif'><img src='img/i1Spc.gif' width='16'></td>
<td background='img/i20tvN.gif'><img src='img/i1Spc.gif' width='16'></td>
<td><img src='img/i16tvFi.gif'></td>
<td>Forellenteich</td>
</tr><tr height='24'>
<td background='img/i20tvV.gif'><img src='img/i1Spc.gif' width='16'></td>
<td style='PADDING:0' valign='top'><img src='img/i20tvE.gif'></td>
<td><img src='img/i16tvFi.gif'></td>
<td>Grillhütte</td>
</tr></table>

Index :: Javascript

template