Me presento me llamo Sebastián y estoy aprendiendo Javascript, ya hace un tiempo vengo programando con PHP pero en muchos casos requiero utilizar el famoso lenguaje JS para poder realizar acciones sin tener que recargar la pagina, paso a contarles mi problema: En este momento estoy armando un formulacion web que tiene un INPUT del tipo TEXT que recibe valores numericos del tipo naturales (enteros y mayores que 0), mi idea es la siguiente; tomando el valor numerico ingresado se tiene que agregar al form X inputs mas, para lograr esto hice lo siguiente:
Código:
<script language="javascript">
function cantidad (id)
{
if (document.forms[0].pjs.value != 0)
{
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
temp = document.getElementById("raw");
if (temp)
{
tbody.removeChild(temp);
}
for (a=1;a<=document.forms[0].pjs.value;a++)
{
var row = document.createElement("TR");
row.id = "raw";
var td1 = document.createElement("TD");
td1.width = "70px";
td1.appendChild(document.createTextNode("Personaje:"));
var td2 = document.createElement("TD");
td2.width = "15px";
var img1 = document.createElement("IMG");
img1.src="system/images/empty.gif";
img1.width = "0";
td2.appendChild(img1);
var td3 = document.createElement("TD");
var input1 = document.createElement("INPUT");
input1.type = "text";
input1.name = "pj" + a;
td3.appendChild(input1);
var td4 = document.createElement("TD");
td4.width = "20px";
var td5 = document.createElement("TD");
td5.width = "20px";
td5.appendChild(document.createTextNode("Nivel:"));
var td6 = document.createElement("TD");
td6.width = "15px";
var img2 = document.createElement("IMG"); img2.src="system/images/empty.gif";
img2.width = "0";
td6.appendChild(img1);
var td7 = document.createElement("TD");
var input2 = document.createElement("INPUT");
input2.type = "text";
input2.name = "pj" + a;
td7.appendChild(input2);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
row.appendChild(td7);
tbody.appendChild(row);
}
}
}
</script>
Y dentro del html tengo lo siguiente:
Código:
<table cellpadding="0" cellspacing="0" id="prueba">
<tbody>
</tbody>
</table>
El problema con este codigo es el siguiente, en el momento que vos varias el valor del input numero, no borra todos los inputs que habia agregado antes y los sigue agregando, para que se entienda mejor: si tengia 4 inputs y modifico el valor a 6, en vez de aparecer solo 6 aparecen 10 (4+6=10), esto no deberia pasar ya que intento borrar todo cuando pongo:
Código:
temp = document.getElementById("raw");
if (temp)
{
tbody.removeChild(temp);
}
La verdad es que ya no se me ocurre que hacer para arreglarlo y tengo que terminar el trabajo rapido, si alguien me puede dar una mano estaria muy agradecido.
Desde ya gracias
Saludos