Ändern der Displayeigenschaft über JS macht Probleme im Firefox

[Thollsten]

Hallo
ich habe eine Tabelle, in der ich über einen Link Detailzeilen ein- bzw. ausblenden möchte.
Aufbau sieht so aus

---------------------------
+/-
---------------------------
Details 1
---------------------------
Noch ne Zeile
---------------------------

Bei Klick wird dann eine Javascriptfuntion aufgerufen die det1.style.display auf 'inline' bzw. 'none' setzt.
Klappt auch soweit, also Details wird angezeigt oder ausgeblendet.
Im Internet Explorer passt alles, "Noch ne Zeile" rutsch hoch oder runter je nachdem ob "Details 1" angezeigt wird oder nicht.
Im Firefox dagegen rutscht "Noch ne Zeile" nicht mehr hoch wenn ich "Details 1" wieder ausblende, der Platz für Detail 1 bleibt belegt (wenn auch leer). Wenn ich die Details dann nochmal einblende rutschte "Noch ne Zeile" immer weiter runter :-/
Meine Code:

HTML:
<table>
<tr>
 <td>
  <img src="minus.gif" id="minus_det1" onclick="collapse(det1)">
  <img src="plus.gif" id="plus_det1" onclick="expand(det1)">
 </td>
</tr>
<tr id="det1">
 <td>Details</td>
</tr>
<tr>
 <td>Noch ne Zeile</td>
</tr>
</table>

Javascript:
function expand(id) {
eval(id+".style.display='inline'");
eval("plus_"+id+".style.display='none'");
eval("minus_"+id+".style.display='inline'");
}

function collapse(id) {
eval(id+".style.display='none'");
eval("plus_"+id+".style.display='inline'");
eval("minus_"+id+".style.display='none'");
}

Danke
Thollsten

[Marc Reichelt]

Hallo Thollsten,

<img src="minus.gif" id="minus_det1" onclick="collapse(det1)">
  <img src="plus.gif" id="plus_det1" onclick="expand(det1)">

Hmm. Das muss IMHO so heißen:

  
<img src="minus.gif" id="minus_det1" onclick="collapse('det1');" alt="-">  
<img src="plus.gif" id="plus_det1" onclick="expand('det1');" alt="+">  

Javascript:
function expand(id) {
eval(id+".style.display='inline'");
eval("plus_"+id+".style.display='none'");
eval("minus_"+id+".style.display='inline'");
}

Merksatz: Eval is evil.

Schlussfolgerung:

  
function expand(id) {  
  document.getElementById(id).style.display = 'inline';  
  document.getElementById('plus_'+id).style.display = 'none';  
  document.getElementById('minus_'+id).style.display = 'inline';  
}  

Das gilt für die andere Funktion natürlich entsprechend.
Schreibe deinen Code auf diese Art und Weise um, führe deinen Code erneut aus und schicke uns das Ergebnis.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Thollsten]

Das gilt für die andere Funktion natürlich entsprechend.
Schreibe deinen Code auf diese Art und Weise um, führe deinen Code erneut aus und schicke uns das Ergebnis.

Selbes Ergebnis. (Die fehlenden ' und ; beim Funktionsaufruf waren im Code schon drin, war nur nen Übertragungsfehler ins Forum ;))

inline ist aber kein geeigneter Wert, um eine Tabellenzeile darzustellen.

Und was ist ein geeigneter Wert? Ich habe nichts "besseres" gefunden

[Cybaer]

Hi,

inline ist aber kein geeigneter Wert, um eine Tabellenzeile darzustellen.
Und was ist ein geeigneter Wert? Ich habe nichts "besseres" gefunden

table-row für die guten Browser und block für den IE.

Will man eine Browserweiche vermeiden: Leerstring - dann wird der Defaultwert genommen.

Gruß, Cybaer

[Gernot Back]

Hallo Cybaer,

Will man eine Browserweiche vermeiden: Leerstring - dann wird der Defaultwert genommen.

Aber den Defaultwert nimmt der IE doch auch, wenn man einem Element einen dem IE unbekannten Wert wie 'table-row' gibt.

Gruß Gernot

[Cybaer]

Hi,

Aber den Defaultwert nimmt der IE doch auch, wenn man einem Element einen dem IE unbekannten Wert wie 'table-row' gibt.

Ja, daß sollte *jeder* Browser so machen. Aber MS traue ich es auch zu, table-row zukünftig falsch zu implementieren ... >:->

Gruß, Cybaer

[Thollsten]

Will man eine Browserweiche vermeiden: Leerstring - dann wird der Defaultwert genommen.

Super Danke - mit Leerstring klappts.

[MudGuard]

Hi,

<img src="minus.gif" id="minus_det1" onclick="collapse(det1)">

Wo wird die Variable det1 mit einem Wert belegt? Und mit welchem?

<tr id="det1">

Sieht so aus, als ob Du diese Tabellenzeile ein-/ausblenden willst.
Du setzt aber display nur entweder auf none oder auf inline.
inline ist aber kein geeigneter Wert, um eine Tabellenzeile darzustellen.

eval(id+".style.display='inline'");

Nur weil ein Element ein id-Attribut hat, bedeutet noch lange nicht, daß ein Javascript-Objekt mit einem Namen, der dem id-Attributwert entspricht, zur Verfügung steht.
Nutze getElementById. Und schmeiß das eval weg.

cu,
Andreas

[Gernot Back]

Hallo Thollsten,

Hallo
ich habe eine Tabelle, in der ich über einen Link Detailzeilen ein- bzw. ausblenden möchte.

mir scheint, du möchtest so etwas:

http://www.sprachlernspiele.de/selftests/klapptabelle/version7_1.html

Gruß Gernot