Tema: Tabla dinámica de entrada de datos
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 03/08/2010, 05:38
eugeluz
 
Fecha de Ingreso: junio-2010
Mensajes: 1
Antigüedad: 14 años, 5 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>