Dynamisches einblenden von Inhalten

[Kai]

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.

Kann mir einer von Euch helfen?

Also sagen wir es existiert eine Zeile... wird in der Zeile ein Link angeklickt werden 20 Unterzeilen angeklickt... und so weiter und so weiter....

Danke im Voraus ;o)

[mdkiller]

Hi!

Veränder dynamisch die display-Eigenschaft er zuerst versteckten Tabellenzellen (ich hoffe, es sind auch tabellarische Daten).

Gruß

mdkiller

[Joachim]

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.

Beschaeftige Dich mit der Css-Eigenschaften display, auf die Du per Javascript zugreifen kannst (Siehe hiesige Doku). Wenn es auch in NC 4x funktionieren soll kannst Du nur mit Div-Layern arbeiten.

Gruesse  Joachim

[Cybaer]

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 [e-mail]
   ----------------------
 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/ ([e-mail])
             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

[wahsaga]

hi,

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

bei zukünftigen fragen dieser art ersetze "sobald" bitte durch "erst nachdem".

und lies mal </faq/#Q-09d>.

gruss,
wahsaga

[Cybaer]

Hi,

bei zukünftigen fragen dieser art ersetze "sobald" bitte durch "erst nachdem".

Warum üerläßt Du das nicht dem Fragesteller? =:-o

und lies mal </faq/#Q-09d>.

? Getestet ist es. Die Opera-Einschränkung ist genannt. Ansehen kann man es sich unter genanntem URL.

Und falls Kai eine sauberere Lösung aus meinem Vorschlag entwickeln sollte, wäre wohl auch jedem gedient ...

... oder? :-))

Gruß, Cybaer

[wahsaga]

hi,

? Getestet ist es. Die Opera-Einschränkung ist genannt. Ansehen kann man es sich unter genanntem URL.

wenn ich dich recht verstanden habe -

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

• "läuft" dein script bisher nur deshalb, weil einige browser bezüglich dieses fehlerhaften name-attributes bei tr recht tolerant sind.

gruss,
wahsaga

[Cybaer]

Hi,

• "läuft" dein script bisher nur deshalb, weil einige browser bezüglich dieses fehlerhaften name-attributes bei tr recht tolerant sind.

Ja, wenn auch unter allen, außer Opera.

Und statt NAME könnte man sicher z.B. auch KENNUNG verwenden, da nicht via getElementsByName, sondern direkt via getAttribute() auf ein beliebiges Attribut zugegriffen wird (nur hier eben mit dem Namen NAME).

Da zumindest XML eigendefinierte Attribute zuläßt, wird Opera hier, wie in so vielen anderen Gebieten ihrer unvollständigen und bug-verseuchten JavaScript-Engine auch, wohl noch nachbessern ... =:-o

Ansonsten kann ich deine Bedenken natürlich verstehen. :-)

Ein (auch aus HTML-Sicht) saubererer Weg wäre vielleicht das Durchgehen aller Tags unter Berücksichtigung/Verwendung von className. Aber, wie gesagt, die liebe Zeit ... =;-)

Aber wie dem auch sei: *Ich* ziehe diese "durch die XML-Brust ins HTML-Auge"-Version einer kompletten Nicht-Lösung jedenfalls vor. Andere mögen dies anders sehen.

Und für alternative Ideen bin ich sowieso offen. Manchmal sieht man ja auch den Wald vor lauterBäumen nicht. =:-)

Gruß, Cybaer

[Cybaer]

Nachtrag:

Und statt NAME könnte man sicher z.B. auch KENNUNG verwenden, da nicht via getElementsByName, sondern direkt via getAttribute() auf ein beliebiges Attribut zugegriffen wird (nur hier eben mit dem Namen NAME).

Ich habe mal spaßeshalber statt NAME ein anderes Attribut verwendet. Und siehe da, jetzt funktioniert es auch mit Opera. Offensichtlich verhaspelt sich Operas JavaScript-Engine hier bei getAttribute und NAME. =:-o

Wenn man also im Script
  objName=obj[i].getAttribute("name","true")+" ";
ersetzt durch
  objName=obj[i].getAttribute("fold","true")+" ";
dann kann man beliebig Tabellenzeilen oder sonstige HTML-Elemente ein- & ausklappen.

Wenn der HTML-Code also z.B. so lautet
 <tr fold="TypA"><td>Zeile 1</td></tr>
 <tr fold="TypB"><td>Zeile 2</td></tr>
 <tr fold="TypB"><td>Zeile 3</td></tr>
 <tr fold="TypC"><td>Zeile 4</td></tr>
 <tr fold="TypD"><td>Zeile 5</td></tr>
würden mit
 fold("tr","Typ",(is_ie)?"block":"table-row","B","C");
die "Typen" B & C eingeklappt (also die Zeilen 2-4 werden ohne Platzhalter vesteckt), während A & D angezeigt werden.

Ab diesen Samstag wird dann die noch etwas verbesserte Routine (z.B. wird auch noch die IE-Unterscheidung zw. block & table-row entfallen) dann mit Erklärung und Online-Beispiel unter http://Coding.vampirehost.de in der DHTML-Rubrik unter dem Titel "Un-/Sichtbare Elemente" abrufbar sein ...

Gruß, Cybaer