nicht angemeldet
Tabellenzeilen per JS ein/ausblenden (IE vs. Firefox)
MudGuard
StruppiIch 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.
-
Hi,
Was mache ich falsch?
el.style.display = 'block';
TR ist nicht "block", sondern "table-row". IE kennt das (noch) nicht und nimmt fälschlicherweise "block".
Nimm also "" und alle sind zufrieden ... ;)
S. auch Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe, wo das genauer erklärt ist mit Links zur Fortbildung. ;-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
TR ist nicht "block", sondern "table-row". IE kennt das (noch) nicht und nimmt fälschlicherweise "block".
Nimm also "" und alle sind zufrieden ... ;)
Sicher? Schon die JavaScript-Konsole im FF 1.5 überprüft?
Gruß,
Harlequin
PS: wie kann man eigentlich diese nervigen CSS-Fehler aus der "JavaScript"-Konsole wieder loswerden?
-
Hi,
Sicher? Schon die JavaScript-Konsole im FF 1.5 überprüft?
Sein Script habe ich mir nicht angeschaut.
Meine Scripte bringen keine Fehler. :)
PS: wie kann man eigentlich diese nervigen CSS-Fehler aus der "JavaScript"-Konsole wieder loswerden?
Löschen-Button drücken. ;)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
Sein Script habe ich mir nicht angeschaut.
Meine Scripte bringen keine Fehler. :)
Also ich kann mich an an Meldungen erinnern, wenn man versucht Display auf "" zu setzen, er behauptet, das wäre ein ungültiger Wert.
PS: wie kann man eigentlich diese nervigen CSS-Fehler aus der "JavaScript"-Konsole wieder loswerden?
Löschen-Button drücken. ;)
Na klasse, dann sind aber auch alle JavaScript Fehler mit weg...
Gruß,
Harlequin
-
Hi,
Also ich kann mich an an Meldungen erinnern, wenn man versucht Display auf "" zu setzen, er behauptet, das wäre ein ungültiger Wert.
Sorry, ich dachte an JS-Fehler, nicht an CSS-Warnungen.
Ist mir bei "" zumindest noch nicht aufgefallen.
Generell nehme ich allerdings die Warnungen im FF 1.5 (wenn auch zähneknirschend) in Kauf. :-(
Ich finde, daß die FF-Programmierer dabei ziemlich weit übers Ziel hinausgeschossen sind.
Die Alternative wäre: Strikte Codierung nach W3C ohne jegliche Abweichung und dafür CSS- & JS-Browserweichen, wenn man nicht-standardkonforme Browser (also im wesentlichen den IE) ebenfalls unterstützen möchte - was in der Praxis (zumindest der kommerziellen) unabdingbar ist.
Da fällt, knirschende Zähne in oder her, die Wahl dann doch leicht ...
Löschen-Button drücken. ;)
Na klasse, dann sind aber auch alle JavaScript Fehler mit weg...Ja, auch da haben die FF-Programmierer IMHO nicht gut genug nachgedacht ...
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! -
Hi,
Also ich kann mich an an Meldungen erinnern, wenn man versucht Display auf "" zu setzen, er behauptet, das wäre ein ungültiger Wert.
Ich habe nochmal nachgeschaut: Es ist, wie es sein sollte: Der Mozilla meldet nichts.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
-
Hi,
PS: wie kann man eigentlich diese nervigen CSS-Fehler aus der "JavaScript"-Konsole wieder loswerden?
Installiere die Extension Console² (http://forums.mozillazine.org/viewtopic.php?t=318102) - die ersetzt die Javascript-Konsole und bietet u.a. die Möglichkeit, die CSS-Meldungen abzuschalten.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
Installiere die Extension Console² (http://forums.mozillazine.org/viewtopic.php?t=318102) - die ersetzt die Javascript-Konsole und bietet u.a. die Möglichkeit, die CSS-Meldungen abzuschalten.
Cool, danke! Ist genau das, was ich gesucht habe.
Gruß,
Harlequin
-
-
-
Nimm also "" und alle sind zufrieden ... ;)
an die Variante hatte ich noch gar nicht gedacht. Geht ja noch besser. Mit den Fehlern in der JS-Konsole kann ich vorerst ganz gut leben.
Vielen Dank
-
-
OK, habe die Antwort jetzt doch gefunden: es muss dann doch eine Browserweiche her:
im IE
display = 'block'im FF
display = 'table-row'.-
OK, habe die Antwort jetzt doch gefunden: es muss dann doch eine Browserweiche her:
nö, muss nich.
im IE
display = 'block'im FF
display = 'table-row'.in beiden:
display = '';
Struppi.
--
Javascript ist toll (Perl auch!)
-