<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);
//onfocus="fc(this)"
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);
}
function fc(campo) {
var n=parseInt(campo.name.substr(6),10);
var a=campo.form.elements["valorA"+n];
var b=campo.form.elements["valorB"+n];
var na=parseFloat(a);
var nb=parseFloat(b);
if (isNaN(na)) { na=0; }
if (isNaN(nb)) { nb=0; }
campo.value=na+nb;
campo.blur();
}
</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> </td>
</tr>
</table>
<table align=center width=20% cellpadding=0 cellspacing=0 border="1">
<tr>
<td> </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>