Cybaer: Dynamisches einblenden von Inhalten

Beitrag lesen

Hi,

ich möchte einen Teil einer Tabelle erst einblenden lassen wenn etwas bestimmtes angeklickt wird, aber ohne die Seite neu laden zu müssen. Ich weiß dass das über DHTML geht, doch leider finde ich kein geeignettes Beispiel.

Nicht ganz trivial - zumal der IE ggf. anders angesteuert werden muß.

Diese Routine habe ich im Einsatz:

/* 'Falte Element 110104' (c) by cybaer@vampirehost.de
   ----------------------
 Inhalt    : HTML-Element anzeigen oder verstecken (mit oder ohne Platzhalter)
 Aufruf    : fold(tag,magic,type)
 Parameter : tag (Tagname des Elements, das gefaltet werden soll)
             magic (einheitlicher Beginn des Name-Attributs der gewuenschten Elemente)
             type (Darstellungsart des Elements, entsprechend der CSS-Eigenschaft display;
                   wenn leer, dann wird das Element mit Platzhalter versteckt -> CSS: visibility)
             optionale Stringparameter (einen oder mehrere Namen von Elementen ohne die magic-Kennung)
 Sprache   : JavaScript 1.5 (erweitertes W3C-DOM - ungesichert)
 Quelle    : http://www.vampirehost.de/gruft/coding/ (cybaer@vampirehost.de)
             Die kostenlose Nutzung der Quelltexte in eigenen Projekten ist
             bei nicht-kommerziellen Projekten (und deren unentgeltlicher
             Herstellung) bei Nennung der Quelle ausdruecklich gestattet.
 InlineFunc: -
 Konstante : -
 Variable  : -
 SystemVar : -
 ExternVar : -
 Rueckgabe : -
 Anmerkung : Jedes zu versteckende/anzuzeigende Element muß einen Namen haben, mit einer
             einheitlichen Kennung am Namensanfang, gefolgt von einem beliebigen Restnamen.
             Wird ein Element gefunden, dessen Namen mit dieser Kennung beginnt und dessen
             Restname bei den optional uebergebenen Parametern vorhanden ist, so wird das Element
             angezeigt. Ist der Restname nicht bei den Parametern, so wird es versteckt.
 Beispiele : HTML  : <tr name="FoldRow1"><td>Zeile 1</td></tr>
                     <tr name="FoldRow2"><td>Zeile 2</td></tr>
             Script: fold("tr","Fold","","Row2")
             -> Zeile 2 wird mit Platzhalter versteckt, Zeile 1 wird angezeigt
             HTML  : <tr name="FoldRow1"><td>Zeile 1</td></tr>
                     <tr name="FoldRow2"><td>Zeile 2</td></tr>
             Script: fold("tr","Fold",(is_ie)?"block":"table-row","Row1")
             -> Zeile 1 wird ohne Platzhalter versteckt, Zeile 2 wird angezeigt
*/

function fold(tag,magic,type) {
 // Lokale Variable definieren
 var i, obj; name, foldNames="";
 // type mit Minimalwert belegen
 type=(type)?type:"";
 // Anzuzeigende Namen in einer Liste zusammenfassen
 for(i=3;i<fold.arguments.length;i++) { foldNames+=magic+fold.arguments[i]+" "; }
 // Kurzform fuer Element-Objekt definieren
 obj=document.getElementsByTagName(tag)
 // Alle passenden Objekte durchgehen
 for(i=0;i<obj.length;i++) {
  // Namen des aktuellen Elementes auslesen
  objName=obj[i].getAttribute("name","true")+" ";
  // Wenn ein Name existiert und dieser auch mit der Kennung beginnt
  if(objName && objName.substring(0,magic.length)==magic) {
   // Fortschritt in Statuszeile anzeigen
   window.status="Bearbeitetes Element: "+(i+1)+"/"+obj.length;
   // Wenn keine Darstellungsart uebergeben wurde: Darstellung mit Platzhalter
   if(!type) {
    // Wenn der Name in der Liste vorhanden ist: Element unsichtbar, andernfalls sichtbar
    obj[i].style.visibility=((foldNames.indexOf(objName)>=0)?"hidden":"visible");
   // Wenn eine Darstellungsart uebergeben wurde: Darstellung ohne Platzhalter
   } else {
    // Wenn der Name in der Liste vorhanden ist: Element verstecken, andernfalls darstellen
    obj[i].style.display=((foldNames.indexOf(objName)>=0)?"none":type);
   }
  }
 }
 // Statuszeile wieder loeschen
 window.status=" ";
}

Allerdings läuft sie nicht unter Opera - vielleicht, weil TR (eigentlich) kein NAME-Attribut kennt.

Ansehen kannst Du es Dir mal unter http://www.vampirehost.de/gruft/coding/gfabas/gfacmd.htm (eine Befehlsliste, bei der einzelne Befehle/Zeilen ein-/Ausgeblendet werden).

Sobald ich Zeit für eine "sauberere" Lösung habe, werde ich die auch in meinem Coding-Schatzkästlein veröffentlichen ...

Gruß, Cybaer