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