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

He conseguido modificar el siguiente script y me permite agregar o quitar nuevas "cajas inputs", pero sabría de que forma tengo que decirle para que en lugar de añadir una caja texto, me agregase toda una fila de 4 inputs.

Este el código, es 100% funcional.

Código html: 
Ver original
  1. <html>
  2. <head>
  3. <title>Agregar y/o quitar cajas </title>
  4. <style>
  5. body, td, th, div, p {
  6. color:#000000;
  7. font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  8. font-size:small;
  9. }
  10. dd div {
  11. margin-top:0.3em;
  12. }
  13. a.addlink {
  14. background:transparent url(add.png) no-repeat scroll left top;
  15. color:#999999;
  16. font-size:0.9em;
  17. padding:1px 0 1px 20px;
  18. text-decoration:none;
  19. }
  20. a.removelink {
  21. background:transparent url(delete.png) no-repeat scroll 4px 0;
  22. color:#999999;
  23. font-size:0.9em;
  24. padding:1px 0 1px 24px;
  25. text-decoration:none;
  26. }
  27. </style>
  28. <script>
  29. function addhostfield()
  30. {
  31.   var container = document.getElementById('defaulthostlist');
  32.   var row = document.createElement('div');
  33.   var input = document.createElement('input');
  34.   var link = document.createElement('a');
  35.   
  36.   input.name = '_default_host[]';
  37.   input.size = '30';
  38.   link.href = '#';
  39.   link.onclick = function() { removehostfield(this.parentNode); return false };
  40.   link.className = 'removelink';
  41.   link.innerHTML = 'remove';
  42.   
  43.   row.appendChild(input);
  44.   row.appendChild(link);
  45.   container.appendChild(row);
  46. }
  47.  
  48. function removehostfield(row)
  49. {
  50.   var container = document.getElementById('defaulthostlist');
  51.   container.removeChild(row);
  52. }
  53. </script>
  54. </head>
  55. <body>
  56. <dd>
  57. <div>Agregar cajas y/o quitar cajas</div><br/>
  58. <div id="defaulthostlist">
  59. <div id="defaulthostentry0"><input type="text" value="" size="30" name="_default_host[]"/></div></div>
  60. <div><a title="Add another field" class="addlink" href="javascript:addhostfield()">add</a></div>
  61. </dd>
  62.  
  63. <!-- Hacer lo mismo pero con 4 inputs en horizontal -->
  64. <input type="text" value="" size="30" name="cantidad"/>
  65. <input type="text" value="" size="30" name="descripcion"/>
  66. <input type="text" value="" size="30" name="precio"/>
  67. <input type="text" value="" size="30" name="total"/>
  68.  
  69. </body>
  70. </html>

¿Alguna idea?

Muchas gracias de antemano!