PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Tabellenzeilen aus- bzw. einblden


Bully
26.02.2009, 13:44:47
Hallo,

ich möcht per Javascript Tabellenzeilen aus- und einblenden, je nachdem wie der Wert einer Auswahlliste ist.

Bisher klappt das allerdings nur bei einer Zeile, die anderen 3 werden nicht angezeigt bei deren Auswahl.

Javascript:
function add_zs(numbers) {
if(numbers == 0) {
document.getElementById('Zeile1').style.display = 'none';
document.getElementById('Zeile2').style.display = 'none';
document.getElementById('Zeile3').style.display = 'none';
document.getElementById('Zeile4').style.display = 'none';
}
if(numbers == 1) {
document.getElementById('Zeile1').style.display = '';
document.getElementById('Zeile2').style.display = 'none';
document.getElementById('Zeile3').style.display = 'none';
document.getElementById('Zeile4').style.display = 'none';
}
if(numbers == 2) {
document.getElementById('Zeile1').style.style.display = '';
document.getElementById('Zeile2').style.style.display = '';
document.getElementById('Zeile3').style.style.display = 'none';
document.getElementById('Zeile4').style.style.display = 'none';
}
if(numbers == 3) {
document.getElementById('Zeile1').style.style.display = '';
document.getElementById('Zeile2').style.style.display = '';
document.getElementById('Zeile3').style.style.display = '';
document.getElementById('Zeile4').style.style.display = 'none';
}
if(numbers == 4) {
document.getElementById('Zeile1').style.style.display = '';
document.getElementById('Zeile2').style.style.display = '';
document.getElementById('Zeile3').style.style.display = '';
document.getElementById('Zeile4').style.style.display = '';
}
}

Html:
<table>
<tr>
<td>Auswahl:</td><td><select name="z1s1" onchange="add_zs(this.value);">
<option value="0" selected="selected">Keine Zeile</option>
<option value="1">1 Zeile</option>
<option value="2">2 Zeilen</option>
<option value="3">3 Zeilen</option>
<option value="4">4 Zeilen</option>
</select></td>
</tr>
<tr id="Zeile1" valign="top" style="display:none;">
<td>Zeile 1 Spalte 1:</td><td><textarea rows="8" cols="60">Zeile 1 Spalte 2</textarea></td>
</tr>
<tr id="Zeile2" valign="top" style="display:none;">
<td>Zeile 2 Spalte 1:</td><td><textarea rows="8" cols="60">Zeile 2 Spalte 2</textarea></td>
</tr>
<tr id="Zeile3" valign="top" style="display:none;">
<td>Zeile 3 Spalte 1:</td><td><textarea rows="8" cols="60">Zeile 3 Spalte 2</textarea></td>
</tr>
<tr id="Zeile4" valign="top" style="display:none;">
<td>Zeile 4 Spalte 1:</td><td><textarea rows="8" cols="60">Zeile 4 Spalte 2</textarea></td>
</tr>
</table>

Weiß leider absolut nicht worann das liegt, ich sehe dort oben keinen Fehler. Hoffe das ihr den seht. :-)

DokuLeseHemmung
26.02.2009, 14:19:44
display hat moch mehr Values.....


Du meinst evtl:
visibility: visible; und visibility: hidden;

Bully
26.02.2009, 15:23:15
Danke dir.
Ich habe Kleinigkeiten gesucht und das offentsichtliche übersehen.

Frag mich allerdings wie sich das doppelte "style" einschleichen konnte habe die zweite "if" abfrage doch nur 3-mal kopiert und die Id's geändert.


Jetzt funktioniert das so wie es soll. :-)

Gnubbel
06.03.2009, 01:23:37
Du meinst evtl:
visibility: visible; und visibility: hidden;

Ich glaub, display = 'block' wär besser.