campos, filas y columnas dinamicamente

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

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.

emprear · #2 (**permalink**) 17/01/2013, 19:53

Lee este tutorial
http://www.redips.net/javascript/add...s-and-columns/

Saludos

JeMaGa · #3 (**permalink**) 18/01/2013, 09:53

Hola gracias si me sirvio ese tutorial pero tengo una pequeña inquietud no se si tu me la puedas aclarar, necesito insertar campos de texto dentro de cada celda que se crea.

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
 
//Anexar fila a la tabla HTML
function appendRow() {
    var tbl = document.getElementById('tabla'), //tabla de referencia
        row = tbl.insertRow(tbl.rows.length),   //fila de la tabla de datos anexados   
        i;
    //Insertar celdas de la tabla a la nueva fila
    for (i = 0; i < tbl.rows[0].cells.length; i++) {
        createCell(row.insertCell(i), i, 'row');
    }
}
//Crear el elemento DIV y añadir a la celda de la tabla
function createCell(cell, text, style) {
    var div = document.createElement('div'), // crear el elemento DIV
        txt = document.createTextNode('sssss');   // crear un nodo de texto
    div.appendChild(txt);                    // anexar nodo de texto para el DIV
    div.setAttribute('class', style);        // conjunto de atributos de clase DIV
    div.setAttribute('className', style);    // conjunto de atributos de clase para IE (?)
    cell.appendChild(div);                   // DIV añadir a la celda de la tabla
}
 
// Anexar columna a la tabla HTML
function appendColumn() {
    var tbl = document.getElementById('tabla'), // tabla de referencia
        i;
    // Bucle abierto para cada fila y cada celda
    for (i = 0; i < tbl.rows.length; i++) {
        createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
    }
}
 
//Eliminar filas de la tabla con un índice mayor que 0
function deleteRows() {
    var tbl = document.getElementById('tabla'), // tabla de referencia
        lastRow = tbl.rows.length - 1,          // establecer el índice de la última fila
        i;
    // Eliminar filas con un índice mayor que 0
    for (i = lastRow; i > 1; i--) {
        tbl.deleteRow(i);
    }
}
 
// Eliminar columnas de la tabla con un índice mayor que 0
function deleteColumns() {
    var tbl = document.getElementById('tabla'), // tabla de referencia
        lastCol = tbl.rows[1].cells.length - 1, // establecer el índice de la última columna
        i, j;
    // Eliminar celdas con un índice mayor que 0 (para cada fila)
    for (i = 1; i < tbl.rows.length; i++) {
        for (j = lastCol; j > 1; j--) {
            tbl.rows[i].deleteCell(j);
        }
    }
}
 
</script>

Agradezco la ayuda

emprear · #4 (**permalink**) 18/01/2013, 13:57

Te pongo esta variante que se entiende mejor

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Tabla dinámica</title>
<script type="text/javascript">
//<![CDATA[
function crea_tabla(){
        var n=5;//filas
        var n2=4;//columnas
        var i=0;
    var tblBody = document.getElementById("MiTabla").getElementsByTagName("tbody")[0]; // identifico el elemento donde hacer el appendChild de las filas
    for (var f=0;f<n;f++) {
        var fila = document.createElement("tr"); // creo una fila
        for (var c=0;c<n2;c++) {
            var celda = document.createElement("td"); // creo una celda
                        i++; // usamos i para crear id's únicos para los input si los requiere
                        var crearInput;
                         crearInput = document.createElement('input'); //creo un input
                         crearInput.type ="text"; // generando atributos del input
                         crearInput.name ="campo";  // generando atributos del input
                         crearInput.id ="campo_"+i;  // generando atributos del input
            celda.appendChild(crearInput); // meto dentro de la celda el input
            fila.appendChild(celda); // meto la celda(que ya tiene el input dentro) dentro de la fila
        }
        tblBody.appendChild(fila); // agrego las filas al tbody
    }   
}
//]]>
</script>
</head>
<body   onload="crea_tabla()">
<table id="MiTabla">
 <tbody></tbody>
 </table>
</body>
</html>

SAludos

JeMaGa · #5 (**permalink**) 19/01/2013, 07:48

Gracias me sirvio mucho, ya crea las filas y las columnas con campos de texto, segun lo necesite, ahora necesito que en las celdas de las columnas aparescan listas desplegables, solo en las celdas de las columnas, ademas que solo me se elimine la ultima fila y o columna insertada no todas las que ya hay.

Gracias ;)

JeMaGa · #6 (**permalink**) 21/01/2013, 13:44

No se si sepas como toamar el valor de esos campos para insertarlos en una base de datos, como se cuales son sus nombres, creo que es campo, pero como lo llamo!! Gracias por toda la ayuda que me puedan brindar

emprear · #7 (**permalink**) 21/01/2013, 17:11

Cita:

Iniciado por JeMaGa

No se si sepas como toamar el valor de esos campos para insertarlos en una base de datos, como se cuales son sus nombres, creo que es campo, pero como lo llamo!! Gracias por toda la ayuda que me puedan brindar

Si,es el name, en el ejemplo es siempre el mismo, pero podés hacer igual que con los id para diferenciarlos.
Saludos