Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/08/2012, 23:59
david_andress
 
Fecha de Ingreso: agosto-2012
Ubicación: Aragua
Mensajes: 25
Antigüedad: 14 años, 2 meses
Puntos: 0
Pregunta Agregar filas a formulario dinamicamente sin que se cree una fila por defecto

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