Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Tabla dinámica de entrada de datos

Estas en el tema de Tabla dinámica de entrada de datos en el foro de Frameworks JS en Foros del Web. Hola, Os cuento mi situación: tengo un formulario en el que se deben ir introduciendo varios datos y lo que quiero es que el usuario ...
  #1 (permalink)  
Antiguo 02/08/2010, 11:37
 
Fecha de Ingreso: agosto-2010
Mensajes: 3
Antigüedad: 13 años, 7 meses
Puntos: 0
Tabla dinámica de entrada de datos

Hola,

Os cuento mi situación: tengo un formulario en el que se deben ir introduciendo varios datos y lo que quiero es que el usuario vea una tabla de lo que ha ido introduciendo y le sume los valores de unos inputs. Una vez ha rellenado todo, debe poder insertar todos esos registros en la base de datos.

El tema está en crear esa tabla... he estado mirando en el foro de PHP y la mayoría de comentarios hacen referencia a AJAX, y soy novato en él. Necesitaría pues que me orientárais un poco en el tema... Y si me podéis pasar alguna línea de código de ejemplo (ya me buscaría la vida para adaptarla), sería genial

Gracias y un saludo
  #2 (permalink)  
Antiguo 03/08/2010, 05:38
 
Fecha de Ingreso: junio-2010
Mensajes: 1
Antigüedad: 13 años, 9 meses
Puntos: 0
Respuesta: Tabla dinámica de entrada de datos

- tambien soy nuevita pero me las estoy arreglando de esta manera y me funciona, si alguien sabe de una manera más limpita agradezco.
- lo que estoy viendo es como pasar esa tabla a variables php para poder cargar en la BD.


Código PHP:
Ver original
  1. <html>
  2. <script language="javascript">
  3. var numero = 0;
  4.  
  5. function addRowToTable(){
  6.   var tbl = document.getElementById('tabla');
  7.   var rows = tbl.getElementsByTagName('tr');
  8.   var inc = rows.length; //total de filas incluida la de Titulos
  9.   var lastRow = rows[inc-1];
  10.   var clone = lastRow.cloneNode(true);
  11.  
  12.  
  13.   // incremento el ID
  14.   clone.getElementsByTagName('input')[0].id = 'dni_'+inc;
  15.   clone.getElementsByTagName('input')[1].id = 'apellido_'+inc;
  16.   clone.getElementsByTagName('input')[2].id = 'nombre_'+inc;
  17.   clone.getElementsByTagName('select')[0].id = 'ocupacion_'+inc;
  18.   clone.getElementsByTagName('input')[3].id = 'monto_'+inc;
  19.  
  20.   tbl.appendChild(clone);
  21.   newID = ++numero;
  22. }
  23.  
  24.  
  25. function removeLastRow(tabla) {
  26.   // obtenemos la tabla
  27.   var TABLE = document.getElementById(tabla);
  28.     // si tenemos mas de una fila, borramos
  29.   if(TABLE.rows.length > 2)
  30.   {
  31.   TABLE.deleteRow(TABLE.rows.length-1);
  32.   --numero;
  33.   }
  34. }
  35.  
  36. function verElementos(evento){
  37.    var tablita0 = new Array();
  38.     var tablita1 = new Array();
  39.     var tablita2 = new Array();
  40.     var tablita3 = new Array();
  41.     var tablita4 = new Array();
  42.  
  43.  
  44.   for (i=0; i<=numero; i++) {
  45.      var my_file0 = document.getElementById("dni_"+ i);
  46.     var my_file1 = document.getElementById("apellido_"+ i);
  47.     var my_file2 = document.getElementById("nombre_"+ i);
  48.     var my_file3 = document.getElementById("ocupacion_"+ i);
  49.     var my_file4 = document.getElementById("monto_"+ i);
  50.    
  51.     tablita0[i]= my_file0.value;
  52.     tablita1[i]= my_file1.value;
  53.     tablita2[i]= my_file2.value;
  54.     tablita3[i]= my_file3.value;
  55.     tablita4[i]= my_file4.value;
  56.  
  57.  
  58.  }
  59.  document.write("<table border='0' width='60%'>");
  60.   for (j=0; j<=numero; j++)
  61.  {
  62.  document.write("<tr>");
  63.  document.write("<td>" + tablita0[j] + "</td>");
  64.  document.write("<td>" + tablita1[j] + "</td>");
  65.  document.write("<td>" + tablita2[j] + "</td>");
  66.  document.write("<td>" + tablita3[j] + "</td>");
  67.  document.write("<td>" + tablita4[j] + "</td>");
  68.  document.write("<td>" + tablita5[j] + "</td>");
  69.  document.write("</tr>");
  70.  }
  71.  document.write("</table>");
  72.  
  73. }
  74. </script>
  75. <body>
  76.  
  77. <table border="0" width="80%">
  78. <tr id="celda" class="celda">
  79. <td class="celdaText">dni</td>
  80. <td class="celdaText">apellido</td>
  81. <td class="celdaText">nombre</td>
  82. <td class="celdaText">ocupa</td>
  83. <td class="celdaText">monto</td>
  84.  
  85. </tr>
  86. </table>
  87. <table border="0" id="tabla" width="60%">
  88. <tr id="celda" class="celda">
  89.   <td class="celdaText"><input  id="dni_0" value="" type="text"  class="valorIIb"/></td>
  90.   <td class="celdaText"><input id="apellido_0" value="" type="text"  class="valorII"/></td>
  91.   <td class="celdaText"><input id="nombre_0" value="" type="text"  class="valorII"/></td>
  92. <td class="celdaText"><input id="ocupacion_0" value="" type="text"  class="valorII"/></td>
  93. class="valorII"/></td>
  94. <td class="celdaText"><input id="monto_0" value="" type="text"  class="valorII"/></td>
  95.  
  96. </tr>
  97. </table>
  98. <input type="button" class="boton" value="[+]" onClick="addRowToTable(event)" alt="Adicionar">&nbsp;
  99. <input type="button" class="boton" value="[-]" onClick="removeLastRow(event)" alt="Remover">
  100. <input type="button" class="boton" value="[v]" onClick="verElementos(event)" alt="Ver elementos">
  101.  
  102. </body>
  103. </html>

Etiquetas: ajax, entrada, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:09.