Ver Mensaje Individual
  #19 (permalink)  
Antiguo 10/12/2009, 17:06
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 2 meses
Puntos: 20
Respuesta: Crear y remover inputs

Cita:
Iniciado por zerokilled Ver Mensaje
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html>
  3. <head>
  4. <title>Crear y remover inputs</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <style>
  7. body, td, th, div, p {
  8. color:#000000;
  9. font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  10. font-size:small;
  11. }
  12. input {
  13. margin:0.3em;
  14. }
  15. a.removelink {
  16. background:transparent url(delete.png) no-repeat scroll 4px 0;
  17. color:#999999;
  18. font-size:0.9em;
  19. padding:1px 0 1px 24px;
  20. text-decoration:none;
  21. }
  22. a.addlink {
  23. background:transparent url(add.png) no-repeat scroll left top;
  24. color:#999999;
  25. font-size:0.9em;
  26. padding:1px 0 1px 20px;
  27. text-decoration:none;
  28. cursor:pointer;
  29. }
  30. </style>
  31. <script type="text/javascript">
  32. <!--
  33. num=0;
  34. function crear(obj) {
  35.   num++;
  36.   fi = document.getElementById('productos');
  37.   contenedor = document.createElement('div');
  38.   contenedor.id = 'div'+num;
  39.   fi.appendChild(contenedor);
  40.  
  41.   // primer input
  42.   ele = document.createElement('input');
  43.   ele.name = '_default_host[]';
  44.   ele.className = 'cajatexto';
  45.   ele.size = '5';
  46.   contenedor.appendChild(ele);
  47.  
  48.    // segundo input
  49.   ele = document.createElement('input');
  50.   ele.name = '_default_host[]';
  51.   ele.className = 'cajatexto';
  52.   ele.size = '30';
  53.   contenedor.appendChild(ele);
  54.  
  55.    // tercer input
  56.   ele = document.createElement('input');
  57.   ele.name = '_default_host[]';
  58.   ele.className = 'cajatexto';
  59.   ele.size = '5';
  60.   contenedor.appendChild(ele);
  61.  
  62.    // cuarto input
  63.   ele = document.createElement('input');
  64.   ele.name = '_default_host[]';
  65.   ele.className = 'cajatexto';
  66.   ele.size = '5';
  67.   contenedor.appendChild(ele);
  68.  
  69.   // boton eliminar
  70.   ele = document.createElement('a');
  71.   ele.href = '#';
  72.   ele.name = 'div'+num;
  73.   ele.onclick = function () {borrar(this.name)}
  74.   ele.className = 'removelink';
  75.   ele.innerHTML = 'Eliminar';
  76.   contenedor.appendChild(ele);
  77. }
  78. function borrar(obj) {
  79.   fi = document.getElementById('productos');
  80.   fi.removeChild(document.getElementById(obj));
  81. }
  82. -->
  83. </script>
  84.  
  85. </head>
  86. <body>
  87. <form method="post" action="#">
  88. <div id="productos"></div>
  89. <div><a title="Add another field" class="addlink" onclick="crear(this)">Añadir</a></div>
  90. </form>
  91. </body>
  92. </html>

Gracias de antemano!