Cita:
Iniciado por zerokilled
asi es como yo lo intente,
Código:
<form method="post" action="#">
<div id="productos"><p>
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/>
</p>
</div>
<a title="Añadir otra fila" class="addlink" onclick="crear(this)">Añadir</a>
</form>
por cierto, me olvide mencionarte que la primera fila se queda sin boton eliminar porque simplemente no aparece en el codigo html. se lo tienes que agregar, pero si lo haces las nuevas filas terminarian con dos botones de eliminar. primero porque en la fila clonada ya existe el boton y segundo porque en la funcion para agregar nuevas filas le estas creando un boton.
Diossssssssss menudo quebradero de cabeza!!!! este tema me supera, utilizaré la forma larga pero efectiva. Ya que no consigo con tu técnica de clonar zerokilled que funcione igual que aquí.
Código javascript
:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Crear y remover inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body, td, th, div, p {
color:#000000;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size:small;
}
input {
margin:0.3em;
}
a.removelink {
background:transparent url(delete.png) no-repeat scroll 4px 0;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 24px;
text-decoration:none;
}
a.addlink {
background:transparent url(add.png) no-repeat scroll left top;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 20px;
text-decoration:none;
cursor:pointer;
}
</style>
<script type="text/javascript">
<!--
num=0;
function crear(obj) {
num++;
fi = document.getElementById('productos');
contenedor = document.createElement('div');
contenedor.id = 'div'+num;
fi.appendChild(contenedor);
// primer input
ele = document.createElement('input');
ele.name = '_default_host[]';
ele.className = 'cajatexto';
ele.size = '5';
contenedor.appendChild(ele);
// segundo input
ele = document.createElement('input');
ele.name = '_default_host[]';
ele.className = 'cajatexto';
ele.size = '30';
contenedor.appendChild(ele);
// tercer input
ele = document.createElement('input');
ele.name = '_default_host[]';
ele.className = 'cajatexto';
ele.size = '5';
contenedor.appendChild(ele);
// cuarto input
ele = document.createElement('input');
ele.name = '_default_host[]';
ele.className = 'cajatexto';
ele.size = '5';
contenedor.appendChild(ele);
// boton eliminar
ele = document.createElement('a');
ele.href = '#';
ele.name = 'div'+num;
ele.onclick = function () {borrar(this.name)}
ele.className = 'removelink';
ele.innerHTML = 'Eliminar';
contenedor.appendChild(ele);
}
function borrar(obj) {
fi = document.getElementById('productos');
fi.removeChild(document.getElementById(obj));
}
-->
</script>
</head>
<body>
<form method="post" action="#">
<div id="productos"></div>
<div><a title="Add another field" class="addlink" onclick="crear(this)">Añadir</a></div>
</form>
</body>
</html>
Gracias de antemano!