ein und ausblenden von td

[kati]

Hi!

ich will, dass wenn jemand in einem pulldown input einen bestimmten punkt auswählt eine bestimmte zeile einer Tabelle erscheint, und wenn er wieder in ein anderer auswählt, soll diese Zeile verschwinden. Im Internetexplorer funktioniert das wunderbar, aber im firefox sieht das grauenhaft aus.

Da die Datei passwortgeschützt ist (und ich darauf keinen einfluss habe) kann ich keinen Link posten, hab das ganze mal gescreenshottet.

http://img394.imageshack.us/my.php?image=screenst3.jpg Das ist, nachdem ich den bestimmten eintrag ausgewählt habe.

//Scriptlein zum einblenden der Zeile
<script type="text/javascript">
  function change(){
    if(document.frmContact.addrzus.options[document.frmContact.addrzus.selectedIndex].id!='a7')
     {document.getElementById("andere").style.display='none';}
    if(document.frmContact.addrzus.options[document.frmContact.addrzus.selectedIndex].id=='a7')
     {document.getElementById("andere").style.display='block';}
    }
</script>

// Select Input
<tr class="colored">
<td class="formText">Filiale/Adresszusatz</td>
<td colspan="2">
 <select id="addrzus" name="addrzus" onchange="change()" class="formInput" >
      <option value="leer" id="a0" >----</option>
      <option value="text1" id="a1" >text1</option>
      <option value="text2" id="a2" >text2</option>
      <option value="text3"  id="a3" >text3</option>
      <option value="text4"  id="a4">text4</option>
      <option value="text5"  id="a5" >text5</option>
      <option value="text6" id="a6" >text6</option>
      <option value="Andere" id="a7" >Andere</option>
 </select>
</td>
<td>&nbsp;</td>
</tr>
//Einzublendende Zeile
<tr id="andere" class="colored" style="display:none;">
 <td class="formText" >Anderer Zusatz</td>
 <td colspan="3" ><input type="text" class="formInput" value="Andere"/></td>
</tr>

Kennt jemand das Problem oder eine lösung dazu?

danke

kati

[Cheatah]

Hi,

Im Internetexplorer funktioniert das wunderbar, aber im firefox sieht das grauenhaft aus.

ja, dieser IE-Bug ist bekannt. Er beruht auf den grundsätzlichen Unfähigkeiten des IE im Umgang mit Tabellen.

{document.getElementById("andere").style.display='block';}

Tabellenzeilen sind - o Wunder - table-row-Elemente, keine Block-Elemente. Und wie so oft ist es nicht sinnvoll, per JavaScript direkt Styles zu setzen, anstatt diese im zentral verwalteten CSS-Code zu hinterlegen und strukturell nur noch durch z.B. Klassifizierung hinreichend günstiger Elemente zu triggern.

<tr id="andere" class="colored" style="display:none;">

Dein Konzept versagt übrigens, wenn der Nutzer JavaScript deaktiviert hat.

Cheatah

[kati]

Tabellenzeilen sind ....

ok.... grundsätzlich habe ich das glaube ich verstanden, meinst du dass ich einfach eine andere css klasse dem tr zu geben? also irgendwie
 {document.getElementById("andere").className='verschwinde';}

.verschwinde {display:none;}

<tr id="andere" class="colored" style="display:none;">

Dein Konzept versagt übrigens, wenn der Nutzer JavaScript deaktiviert hat.

ist mir bewussst, bin aber auf keine andere lösung gekommen, ausser das mit Javascript zu machen. Oder kennst du was anderes?

[Christian S.]

Tabellenzeilen sind ....

ok.... grundsätzlich habe ich das glaube ich verstanden, meinst du dass ich einfach eine andere css klasse dem tr zu geben? also irgendwie
{document.getElementById("andere").className='verschwinde';}

.verschwinde {display:none;}

So meint er es wohl. Wobei ich es lieber anders machen würde. (wie du). Für reine anzeige/nicht-anzeige sachen braucht man imo keine extra Klasse.

<tr id="andere" class="colored" style="display:none;">

Dein Konzept versagt übrigens, wenn der Nutzer JavaScript deaktiviert hat.

ist mir bewussst, bin aber auf keine andere lösung gekommen, ausser das mit Javascript zu machen. Oder kennst du was anderes?

Du könntest das display: none auch erst im JavaScript zuweisen. Oder lass es einfach so. JavaScript haben nach meiner Erfahrung sowieso ca. 98% angeschaltet und ohne ist dein Konzept wahrscheinlich eh nicht bedienbar.

Ohne JS kannst du jedenfalls nicht das change Event der DropDownList abfangen.

Gruß!

[Cheatah]

Hi,

.verschwinde {display:none;}
So meint er es wohl.

so ähnlich.

Wobei ich es lieber anders machen würde. (wie du). Für reine anzeige/nicht-anzeige sachen braucht man imo keine extra Klasse.

Wer sagt denn, dass es langfristig nur um das (Nicht-)Anzeigen eines Elements geht? Die Tabelle bzw. der Tabellenbereich (<tbody>) klassifiziert sich ggf. z.B. als "othersSelected" - was damit gemacht wird, falls überhaupt, darf andernorts entschieden werden, das interessiert JavaScript nicht.

Du könntest das display: none auch erst im JavaScript zuweisen.

Bzw. die Klasse entfernen/ändern/eine andere setzen/was auch immer.

Oder lass es einfach so. JavaScript haben nach meiner Erfahrung sowieso ca. 98% angeschaltet und ohne ist dein Konzept wahrscheinlich eh nicht bedienbar.

Irgendwelche pulverigen Materialien in den Kopf zu stecken halte ich selten für eine gute Lösung.

Ohne JS kannst du jedenfalls nicht das change Event der DropDownList abfangen.

Eben. Entsprechend sollte die zusätzliche Eingabemöglichkeit omnipräsent sein. Es ist ohnehin eine serverseitige Auswertung unumgänglich.

Cheatah

[Christian S.]

Hi,

versuch mal statt
document.getElementById("andere").style.display='block';
zu schreiben:

document.getElementById("andere").style.display='';

Gruß!

[suit]

Kennt jemand das Problem oder eine lösung dazu?

http://forum.de.selfhtml.org/archiv/2008/3/t168473/#m1099411