Für viele Internetanwendungen kann es sinnvoll sein Tabellenzeilen dynamisch ein- und auszublenden. Hier ist ein Beispiel für IE. Diese Lösung arbeiet mit CSS-Vorlagen und einer Javascript-Funktion:
<style type="text/css">
<!--
.rowtosee {display:table-row;} /* diese Zeile ist sichtbar */
.rollout {display:none;} /* diese Zeile ist nicht sichtbar */
-->
</style>
Folgende Javascript-Funktionen werden benötigt:
<script language="javascript" type="text/javascript">
//das Attribut einer ID ändern
function writeIDClass(ID,Attribs,Value) {
obj=document.getElementById(ID);
eval("obj.style."+Attribs+"='"+Value+"'");
}
var BereichOld = "";
var BereichAnzahl;
function Show(bereich,anzahl) {
//neuen Bereich einblenden
for(i=1;i<=anzahl;i++) {
writeIDClass(bereich+"-"+i,"display","block");
}
//aten Bereich ausblenden
if (BereichOld != ""){
for(i=1;i<=BereichOldAnzahl;i++) {
writeIDClass(BereichOld+"-"+i,"display","none");
}
}
//die Werte des alten Bereiches merken
BereichOld=bereich;
BereichOldAnzahl=anzahl;
}
</script>
In unserer HTML-Beispiel-Tabelle müssen die einzelnen Zeilen mit IDs versehen werden:
<table width="500" border="0" cellspacing="2" cellpadding="4">
<tr>
<td height="50" id="zeile1" class="rowtosee" onClick="Show('zeile1',2)" bgcolor="#FF0000"> </td>
</tr>
<tr>
<td height="50" id="zeile1-1" class="rowtohide" bgcolor="#0000FF"> </td>
</tr>
<tr>
<td height="50" id="zeile1-2" class="rowtohide" bgcolor="#0000FF"> </td>
</tr>
<tr>
<td height="50" id="zeile2" class="rowtosee" onClick="Show('zeile2',2)" bgcolor="#FF00FF"> </td>
</tr>
<tr>
<td height="50" id="zeile2-1" class="rowtohide" bgcolor="#00FFFF"> </td>
</tr>
<tr>
<td height="50" id="zeile2-2" class="rowtohide" bgcolor="#00FFFF"> </td>
</tr>
</table>
Bemerkungen:
Die Zeilen die zu Beginn sichtbar sein sollen müssen die Klasse "rowtosee" haben, die Zeilen die unsichtbarsein sollen haben die Klasse "rowtohide".
Mit onClick auf die Zeile werden der Javascript-Funktion Show zwei Variablen übergeben: Der name der ID der Zeile sowie die anzahl der einzublenden folgenden Zeilen.
Alles zusammen man hier als lauffähigtes Beispiel sehen: beispiel_hide_show.html (1,7 KB)