columnas y filas dimanicamente

JeMaGa · #1 (**permalink**) 17/01/2013, 15:30

Buenas tardes,

tengo una tabla creada en html, con 13 columnas y sin filas. las filas se insertan según el usuario lo indique, hasta hay todo bien ahora necesito que se me creen columnas dinamicamente en la misma tabla según como lo indique el usuario, la idea es que un botón me agregue la columna y luego otro boton me agrege la fila en ese orden pero no se como hacerlo yo tengo esto.

Código PHP:

Ver original<body>
 
<center><input name="Agregar" type="button" value="Filas" onClick="agregarUsuario()"></center>
 
 
<table width="101%" height="38" border="1" id="tabla" name="tabla">
  <tr>
    <th scope="col"><h5>No.ANALISIS</h5></th>
    <th scope="col"><h5>PRODUCTO </h5></th>
    <th scope="col"><h5>LOTE </h5></th>
    <th scope="col"><h5>PRESENTACION</h5></th>
    <th scope="col"><h5>CLIENTE </h5></th>
    <th scope="col"><h5>CANTIDAD MUESTREADA</h5></th>
    <th scope="col"><h5><p>FORMA FARMACEUTICA</p></h5></th>
    <th scope="col"><h5>FECHA RECEPCION</h5></th>
    <th scope="col"><h5>FECHA ANALISIS</h5></th>
    <th scope="col"><h5>FECHA RESULTADOS</h5></th>
    <th scope="col"><h5>TECNICA</h5></th>
    <th scope="col"><h5>METODO</h5></th>
    <th scope="col"><h5>FORMATO</h5></th>
  </tr>
</table>
 
 
</body>

este es el javascript que me crea las filas

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
 
    var posicionCampo=1;
 
    function agregarUsuario(){
 
    nuevaFila = document.getElementById("tabla").insertRow(-1);
 
    nuevaFila.id=posicionCampo;
    
 
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo1"+posicionCampo+"' name='campo1["+posicionCampo+"]' value=''/></td>";
 
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo2"+posicionCampo+"' name='campo2["+posicionCampo+"]' value=''/></td>";
 
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo3"+posicionCampo+"' name='campo3["+posicionCampo+"]' values=''/></td> ";
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo4"+posicionCampo+"' name='campo4["+posicionCampo+"]' values=''></td>";      
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo5"+posicionCampo+"' name='campo5["+posicionCampo+"]' value=''/></td>";
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo6"+posicionCampo+"' name='campo6["+posicionCampo+"]' value=''/></td>";
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo7"+posicionCampo+"' name='campo7["+posicionCampo+"]' value=''/></td>";
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo8"+posicionCampo+"' name='campo8["+posicionCampo+"]' value=''/></td>";
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo9"+posicionCampo+"' name='campo9["+posicionCampo+"]' value=''/></td>";
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo10"+posicionCampo+"' name='campo10["+posicionCampo+"]' value=''/></td>";
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo11"+posicionCampo+"' name='campo11["+posicionCampo+"]' value=''/></td>";
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo12"+posicionCampo+"' name='campo12["+posicionCampo+"]' value=''/></td>";
    
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='text' size='20' id='campo13"+posicionCampo+"' name='campo13["+posicionCampo+"]' value=''/></td>";
 
    nuevaCelda=nuevaFila.insertCell(-1);
    nuevaCelda.innerHTML="<td><input type='button' value='X' onclick='eliminarUsuario(this)'></td>";
    
    posicionCampo++;
 
    }
 
    function eliminarUsuario(obj){
 
    var oTr = obj;
 
    while(oTr.nodeName.toLowerCase()!='tr'){
 
    oTr=oTr.parentNode;
 
    }
 
    var root = oTr.parentNode;
 
    root.removeChild(oTr);
 
    }
 
 
</script>

como se dan cuenta hay para que se me inserten 13 celdas, que son las celdas o columnas fijas, pero necesito insertar mas de 13, pero no se como.

Agradezco toda la ayuda que me puedan brindar.

klyfa · #2 (**permalink**) 17/01/2013, 15:47

tendrias que postear en la seccion de javascript, ahi seguro que te dan más informacion