nicht angemeldet
Ich hoffe mir kann jemand weiterhelfen, tagelanges gegoogle hat keine Hinweise ergeben.
Ich möchte einzelne Zeilen einer Tabelle durch Klick auf einen Button ein- und ausblendbar machen. Meine bisherige Lösung sieht (vereinfacht) wie folgt aus:
<html>
<head>
<title>Testseite</title>
<script language="JavaScript">
function show() {
el = document.getElementById('myRow');
el.style.visibility = 'visible';
el.style.display = 'block';
}
function hide() {
el = document.getElementById('myRow');
el.style.visibility = 'hidden';
el.style.display = 'none';
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr style="visibility: hidden; display: none; " id="myRow">
<td>2.1</td>
<td>2.2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
<input type="button" onclick="show();" value="Anzeigen">
<input type="button" onclick="hide();" value="Verstecken">
</body>
</html>
Im Internet Explorer 6 (unter XP) funktioniert das ganze wie gewünscht, die Zeile wird nahtlos eingeblendet und der Rest der Tabelle verschiebt sich nach unten und umgekehrt. Leider sieht Firefox (1.5.0.4/XP) die Sache etwas anders: nach dem Aufruf von show() werden zwar die Zusätzlichen Zellen angezeigt und die dritte Zeile nach unten geschoben, allerdings passen die Zellen nicht ins Tabellenlayout und es entsteht viel leere Fläche unterhalb, die auch nach hide() bestehen bleibt.
Was mache ich falsch? Ist das TR-Element nicht das richtige zum anzeigen/verstecken? Bin für jeden Hinweis dankbar.
MudGuard
Struppi