Tema: Crear y remover inputs
Ver Mensaje Individual
  #11 (permalink)  
Antiguo 08/12/2009, 15:23
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
por lo pronto, me parece que esta bastante bien. el codigo se parece un poco al que inicialmente tenias pero no esta mal. ¿simplificar el codigo? tendrias que usar cloneNode como en el ejemplo que te mostre en price_unit.
Serías tan amable de hacerme el ejemplo de clonar en mi ejemplo anterior? Es que no consigo conseguir el mismo efecto. Este es lo más que he llegado clonando. Y si ejecutas el anterior y este veras que no se comportan igual.

Código html: 
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.   // boton eliminar
  42.   ele = document.createElement('a'); 
  43.   ele.href = '#';
  44.   ele.name = 'div'+num;
  45.   ele.onclick = function () {borrar(this.name)}
  46.   ele.className = 'removelink';
  47.   ele.innerHTML = 'Eliminar';
  48.   contenedor.appendChild(ele);
  49.   
  50.   var container = document.getElementById('productos');
  51.   container.appendChild(container.firstChild.cloneNode(true));
  52.   
  53. }
  54. function borrar(obj) {
  55.   fi = document.getElementById('productos'); 
  56.   fi.removeChild(document.getElementById(obj)); 
  57. }
  58.  
  59.  
  60. --> 
  61. </script>
  62.  
  63. </head>
  64. <body>
  65. <form method="post" action="#">
  66. <div><a title="Añadir otra fila" class="addlink" onclick="crear(this)">Añadir</a></div>
  67. <div id="productos"><p> 
  68. <input type="text" value="" size="5" name="cantidad"/>
  69. <input type="text" value="" size="30" name="descripcion"/>
  70. <input type="text" value="" size="5" name="precio"/>
  71. <input type="text" value="" size="5" name="total"/></p>
  72. <div>
  73. </form> 
  74. </body>
  75. </html>

Muchas gracias de antemano