Tabla dinámica de entrada de datos

Bokomoth · #1 (**permalink**) 02/08/2010, 11:37

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

eugeluz · #2 (**permalink**) 03/08/2010, 05:38

- 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<html>
<script language="javascript">
var numero = 0;
 
function addRowToTable(){
  var tbl = document.getElementById('tabla');
  var rows = tbl.getElementsByTagName('tr');
  var inc = rows.length; //total de filas incluida la de Titulos
  var lastRow = rows[inc-1];
  var clone = lastRow.cloneNode(true);
  
  
  // incremento el ID
  clone.getElementsByTagName('input')[0].id = 'dni_'+inc;
  clone.getElementsByTagName('input')[1].id = 'apellido_'+inc;
  clone.getElementsByTagName('input')[2].id = 'nombre_'+inc;
  clone.getElementsByTagName('select')[0].id = 'ocupacion_'+inc;
  clone.getElementsByTagName('input')[3].id = 'monto_'+inc;
 
  tbl.appendChild(clone);
  newID = ++numero;
}
 
 
function removeLastRow(tabla) {
  // obtenemos la tabla
  var TABLE = document.getElementById(tabla);
    // si tenemos mas de una fila, borramos
  if(TABLE.rows.length > 2) 
  {
  TABLE.deleteRow(TABLE.rows.length-1);
  --numero;
  }
}
 
function verElementos(evento){
   var tablita0 = new Array();
    var tablita1 = new Array();
    var tablita2 = new Array();
    var tablita3 = new Array();
    var tablita4 = new Array();
 
 
  for (i=0; i<=numero; i++) {
     var my_file0 = document.getElementById("dni_"+ i);
    var my_file1 = document.getElementById("apellido_"+ i);
    var my_file2 = document.getElementById("nombre_"+ i);
    var my_file3 = document.getElementById("ocupacion_"+ i);
    var my_file4 = document.getElementById("monto_"+ i);
    
    tablita0[i]= my_file0.value;
    tablita1[i]= my_file1.value;
    tablita2[i]= my_file2.value;
    tablita3[i]= my_file3.value;
    tablita4[i]= my_file4.value;
 
 
 }
 document.write("<table border='0' width='60%'>");
  for (j=0; j<=numero; j++)
 {
 document.write("<tr>");
 document.write("<td>" + tablita0[j] + "</td>");
 document.write("<td>" + tablita1[j] + "</td>");
 document.write("<td>" + tablita2[j] + "</td>");
 document.write("<td>" + tablita3[j] + "</td>");
 document.write("<td>" + tablita4[j] + "</td>");
 document.write("<td>" + tablita5[j] + "</td>");
 document.write("</tr>");
 }
 document.write("</table>");
 
}
</script>
<body>
 
<table border="0" width="80%">
<tr id="celda" class="celda">
<td class="celdaText">dni</td>
<td class="celdaText">apellido</td>
<td class="celdaText">nombre</td>
<td class="celdaText">ocupa</td>
<td class="celdaText">monto</td>
 
</tr>
</table>
<table border="0" id="tabla" width="60%">
<tr id="celda" class="celda">
  <td class="celdaText"><input  id="dni_0" value="" type="text"  class="valorIIb"/></td>
  <td class="celdaText"><input id="apellido_0" value="" type="text"  class="valorII"/></td>
  <td class="celdaText"><input id="nombre_0" value="" type="text"  class="valorII"/></td>
<td class="celdaText"><input id="ocupacion_0" value="" type="text"  class="valorII"/></td>
class="valorII"/></td>
<td class="celdaText"><input id="monto_0" value="" type="text"  class="valorII"/></td>
 
</tr>
</table>
<input type="button" class="boton" value="[+]" onClick="addRowToTable(event)" alt="Adicionar">&nbsp;
<input type="button" class="boton" value="[-]" onClick="removeLastRow(event)" alt="Remover">
<input type="button" class="boton" value="[v]" onClick="verElementos(event)" alt="Ver elementos">
 
</body>
</html>