Agregar filas a formulario dinamicamente sin que se cree una fila por defecto

david_andress · #1 (**permalink**) 27/08/2012, 23:59

Hola a todos soy nuevo en el foro, soy novato utilizando los lenguajes php y javascript, pero me puedo defender. Estoy trantando de crear un formulario utilizando el javascript para poder agregar filas dinamicamente desde un boton, googleando por ahi encontre un codigo que me permitia hacer eso:

Código PHP:

  <html><head>

<title>Agregar fila de campos DINAMICOS</title>

 
<script type="text/javascript">

function adicionarFila(){

var cont = document.getElementById("cont");

var filas = document.getElementById("filas");

cont.setAttribute("value", parseInt(cont.value,0)+1);

var tabla = document.getElementById("contenido").tBodies[0];

var fila = document.createElement("TR");

fila.setAttribute("align","center");

 
var celda1 = document.createElement("TD");

var codigo = document.createElement("INPUT");

codigo.setAttribute("type","text");

codigo.setAttribute("size","8");

codigo.setAttribute("maxlength","20");

codigo.setAttribute("name","codigo" + cont.value);

celda1.appendChild(codigo);

 
var celda2 = document.createElement("TD");

var sel = document.createElement("SELECT");

sel.setAttribute("size","1");

sel.setAttribute("name","sel" + cont.value);

opcioncur = document.createElement("OPTION");

opcioncur.innerHTML = '';

opcioncur.value = '';

sel.appendChild(opcioncur);

 
opcion1 = document.createElement("OPTION");

opcion1.innerHTML = "este Select depende de lo que";

opcion1.value = "este Select depende de lo que";

sel.appendChild(opcion1);

 
opcion2 = document.createElement("OPTION");

opcion2.innerHTML = "se ponga en el anterior campo";

opcion2.value = "se ponga en el anterior campo";

sel.appendChild(opcion2);

 
celda2.appendChild(sel);

 
var celda3 = document.createElement("TD");

var valorA = document.createElement("INPUT");

valorA.setAttribute("type","text");

valorA.setAttribute("size","1");

valorA.setAttribute("maxlength","3");

valorA.setAttribute("name","valorA" + cont.value);

celda3.appendChild(valorA);

 
var celda4 = document.createElement("TD");

var valorB = document.createElement("INPUT");

valorB.setAttribute("type","text");

valorB.setAttribute("size","1");

valorB.setAttribute("maxlength","3");

valorB.setAttribute("name","valorB" + cont.value);

celda4.appendChild(valorB);

 
var celda5 = document.createElement("TD");

var valorC = document.createElement("INPUT");

valorC.setAttribute("type","text");

valorC.setAttribute("size","1");

valorC.setAttribute("maxlength","3");

valorC.setAttribute("name","valorC" + cont.value);

celda5.appendChild(valorC);

 
var celda6 = document.createElement('TD');

var boton = document.createElement('INPUT');

boton.setAttribute('type','button');

boton.setAttribute('value','borrar');

boton.onclick=function(){borrarFila(this);}

celda6.appendChild(boton);

 
fila.appendChild(celda1);

fila.appendChild(celda2);

fila.appendChild(celda3);

fila.appendChild(celda4);

fila.appendChild(celda5);

fila.appendChild(celda6);

 
tabla.appendChild(fila);

}

function borrarFila(button){

var fila = button.parentNode.parentNode;

var tabla = document.getElementById('contenido').getElementsByTagName('tbody')[0];

tabla.removeChild(fila);

}

 
</script>

</head>

<body onLoad="adicionarFila()">

<Form name="detalle" action="ej.asp" method="get">

<input name="cont" type="hidden" id="cont" value="0" >

<input name="filas" type="hidden" id="filas" value="" >

<table align=center width=20% cellpadding=0 cellspacing=0 id="contenido" border="1">

<tr align="center">

<td>codigo</td>

<td>Select dependiente de Codigo</td>

<td>A +</td>

<td>B =</td>

<td>C</td>

<td>&nbsp;</td>

</tr>

</table>

<table align=center width=20% cellpadding=0 cellspacing=0 border="1">

<tr>

<td>&nbsp;</td>

</tr>

<tr align="center">

<td align="CENTER"><input name="enviar" type="submit" id="enviar" value="enviar" onClick="filas.value=cont.value, cont.value=0">

<input name="nueva_fila" type="button" id="nueva_fila" value="nueva fila" onClick="adicionarFila()"></td>

</tr>

</table>

</form>

</body>

</html>

Me va de maravilla, el problema es que sin yo hacer click en el boton, por defecto, agrega una fila a la tabla, yo necesito agregar una fila unicamente cuando se clickea el boton. Espero que me puedan ayudar, disculpen si la respuesta es muy obvia, pero soy un novato y me estoy iniciando apenas en esto. Gracias

#2 (**permalink**) 28/08/2012, 02:37

Si te fijas, la etiqueta body llama a la función cuando se carga la página:

Código HTML:

Ver original<body onLoad="adicionarFila()">

Cámbialo por:

Código HTML:

Ver original<body>

Un saludo

visitante28 · #3 (**permalink**) 28/08/2012, 07:06

tambien puedes utilizar jquery para agregar la fila de una manera mas rapida y con menos codigo con el metodo append revisalo..

saludos.

#4 (**permalink**) 28/08/2012, 07:13

Cita:

Iniciado por visitante28

tambien puedes utilizar jquery para agregar la fila de una manera mas rapida y con menos codigo con el metodo append revisalo..

saludos.

jQuery no siempre es LA opción, y más si su código solo es esto. Piensa que, por mucho que se simplificara el código, estaría incluyendo una librería que (si mal no recuerdo) tiene 9.000 líneas de código y ocupa 32Kb minificada. Creo que es mucho para usarlo en un script de 20 líneas

Paz!

PD: Que conste que me gusta jQuery y lo uso, pero si en una página solo se requiere una vez, no es necesario...

david_andress · #5 (**permalink**) 28/08/2012, 17:20

Muchas gracias por sus respuestas me sirvio mucho , ahora puedo continuar mi formulario en paz.