✔ Bei Eingabe einer Zahl in input Element weitere Elemente anzeigen

[anve]

Hallo,

ich habe ein Element eines Formulars:

<input name="no" type="text" size="5" maxlength="5"></td>

Wenn der User nun z.B. 5 eingibt, dann sollten diese fünf Elemente darunter erscheinen:

<tr><td>Element 1:</td>
<td align="right"><input name="childno1" type="text" size="5" maxlength="5"></td>
</tr>
<tr>
<td>Element 2:</td>
<td align="right"><input name="childno2" type="text" size="5" maxlength="5"></td>
</tr>
<tr>
<td>Element 3:</td>
<td align="right"><input name="childno3" type="text" size="5" maxlength="5"></td>
</tr>
<tr>
<td>Element 4:</td>
<td align="right"><input name="childno4" type="text" size="5" maxlength="5"></td>
</tr>
<tr>
<td>Element 5:</td>
<td align="right"><input name="childno5" type="text" size="5" maxlength="5"></td>
</tr>

Wie würde soetwas gehen?

 

[hela]

..., dann sollten diese fünf Elemente darunter erscheinen:

<td>Element 1:</td>
<td align="right"><input name="childno1" type="text" size="5" maxlength="5"></td>
<td>Element 2:</td>
<td align="right"><input name="childno2" type="text" size="5" maxlength="5"></td>
<td>Element 3:</td>
<td align="right"><input name="childno3" type="text" size="5" maxlength="5"></td>
<td>Element 4:</td>
<td align="right"><input name="childno4" type="text" size="5" maxlength="5"></td>
<td>Element 5:</td>
<td align="right"><input name="childno5" type="text" size="5" maxlength="5"></td>

...

Hallo,
die TD-Elemente sind Tabellenzellen. Die erscheinen nebeneinander in einer Zeile und nicht untereinander!

 

[anve]

Sorry, hab die tr vergessen ...

 

[tombe]

Die "Browserverträglichkeit" habe ich nicht getestet, sollte aber in den meisten Fällen klappen.

<script language="javascript" type="text/javascript">
function zeigen(zahl) {
zahl = parseInt(zahl);

for (zeile = 1; zeile <= 5; zeile++) {
	document.getElementById("z" + zeile).style.display = "none";
}

for (zeile = 1; zeile <= zahl; zeile++) {
	document.getElementById("z" + zeile).style.display = "block";
}

}
</script>
<table>
<tr>
	<td>Anzahl</td><td><input name="no" type="text" size="5" maxlength="5" onchange="zeigen(this.value)"></td>
</tr>

<tr id="z1" style="display: none;">
	<td>Element 1:</td>
	<td align="right"><input name="childno1" type="text" size="5" maxlength="5"></td>
</tr>
<tr id="z2" style="display: none;">
	<td>Element 2:</td>
	<td align="right"><input name="childno2" type="text" size="5" maxlength="5"></td>
</tr>
<tr id="z3" style="display: none;">
	<td>Element 3:</td>
	<td align="right"><input name="childno3" type="text" size="5" maxlength="5"></td>
</tr>
<tr id="z4" style="display: none;">
	<td>Element 4:</td>
	<td align="right"><input name="childno4" type="text" size="5" maxlength="5"></td>
</tr>
<tr id="z5" style="display: none;">
	<td>Element 5:</td>
	<td align="right"><input name="childno5" type="text" size="5" maxlength="5"></td>
</tr>
</table>

 

[anve]

Danke tombe!

Ich habe zuerst an soetwas wie per JavaScript die einzelnen Elemente zu generieren. Aber deine Lösung verstehe sogar ich.

Ich habs im IE9, FF6 und Opera 11.5 getestet und funktioniert.