Agrandar casilla de una tabla

shekel · #1 (**permalink**) 15/11/2011, 15:26

En primer lugar.. desconozco si lo que quiero hacer se tiene que hacer con javascript o se puede hacer solo con php, pero creo que es javascript..

Tengo una tabla de una sola columna pero con varias filas.. unas 20. Lo que quiero es que al pinchar en una de ellas se "cree" otra fila mas abajo con otros datos que hagan referencia a la casilla pinchada, tambien me gustaria que tuviese otro estilo

Ejemplo:

--------------------------------
MANOLO
--------------------------------
LUIS
--------------------------------
ALFONSO
--------------------------------
MARIA
--------------------------------

Despues de pinchar en un nombre, en este caso ALFONSO:

--------------------------------
MANOLO
--------------------------------
LUIS
--------------------------------
ALFONSO
-----------------------------------------------------------------
Alonso Garcia, Alfonso
22 años
España
-----------------------------------------------------------------
MARIA
--------------------------------

GatorV · #2 (**permalink**) 15/11/2011, 16:11

Justamente estoy desarrollando algo así con jQuery, es algo sencillo, primero obtienes el <tr> donde estas posicionado e insertas otra fila abajo y con un request en AJAX muestras los datos:

Código PHP:

Ver originaltr.after('<tr id="detailsTr"><td colspan="8"><div id="detailsArea" style="display: none;">foo</div></td></tr>');

Puedes pulsar toda la fila o poner un link en la fila que lo usas como trigger, el punto es obtener la fila para insertar después la otra fila con los datos.

Saludos.

IsaBelM · #3 (**permalink**) 15/11/2011, 17:45

también se puede hacer con puro javascript. sólo hay que emular insertAfter y usando ajax como te indica GatorV

Lanix_0 · #4 (**permalink**) 15/11/2011, 23:00

Podrias probar con

Código Javascript:

Ver originalvar nodo = document.createElement("p");
var contenido = document.createTextNode("Nombre");
nodo.appendChild(contenido);

shekel · #5 (**permalink**) 17/11/2011, 11:19

Gracias.. ya logrue hacerlo, pero queda muy feo.. hay alguna forma para que la celda parezca que crezca y no aparezca??

En plan:

for (i = 0; i<=3;i++) //segundos
altura=altura+5px

GatorV · #6 (**permalink**) 17/11/2011, 15:21

Si usas jQuery puedes obtener el id del <div> interno y usar show(300) para que aparezca de forma animada.

Saludos.

shekel · #7 (**permalink**) 22/11/2011, 15:45

Perdonad que reabra el tema.. pero tengo un problema, me crea la tabla y ya se modificarla y todo eso pero me ocurre algo "extraño". El codigo que estoy usando lo encontre por internet porque me parecia mas facil...

Código Javascript:

Ver originalfunction MostrarCaja(num) {
var raiz = document.getElementsByClassName("casilla") [num];
 
// creates a <table> element and a <tbody> element
var tbl     = document.createElement("table");
var tblBody = document.createElement("tbody");
 
// creating all cells
for (var j = 1; j < 5; j++) {
        // creates a table row
        var row = document.createElement("tr");
 
        for (var i = 1; i < 3; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                var cellText = document.createTextNode("cell");
                
                cell.appendChild(cellText);
                row.appendChild(cell);
        }
 
        // add the row to the end of the table body
        tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
raiz.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "1");
tbl.setAttribute("width", "500");
}

Este es el codigo php que genera la clase "casilla"

Código PHP:

Ver originalecho '<table width="100%" border="0" cellpadding="0" cellspacing="0" class="casilla" >';
echo '  <tr>';
echo '    <td width="05%" onclick="MostrarCaja(' .$NumeroFila .')">Nombre</td>';
echo '    <td width="75%" onclick="MostrarCaja(' .$NumeroFila .')">Maria</td>';
echo '  </tr>';
echo '</table>';

Y aqui el resultado del antes y despues del click

ANTES:

DESPUES:

Se nota que al crear la tabla la celda donde pone "maria" se desplaza hasta el ancho de la tabla que creo..

GatorV · #8 (**permalink**) 22/11/2011, 17:02

Pues es "normal" yo creo, estas agregando una tabla en una celda, tendrías que darle a esa celda un "rowspan" para que haga el span en las demás tablas.

Saludos.

IsaBelM · #9 (**permalink**) 22/11/2011, 17:52

has probado la función getElementsByClassName() en ie??. lee esto

shekel · #10 (**permalink**) 23/11/2011, 09:25

Cita:

Iniciado por GatorV

Pues es "normal" yo creo, estas agregando una tabla en una celda, tendrías que darle a esa celda un "rowspan" para que haga el span en las demás tablas.

Saludos.

Y como puedo hacer para que no me lo agrege a la celda? sino que me lo agrege justo donde deberia dar comienzo la primer celda siguiente??

Lo del rowspan lo he dejado asi pero no cambia nada...

Código PHP:

Ver originalecho '    <td width="05%" onclick="MostrarCaja(' .$NumeroFila .')" rowspan="2">Nombre</td>';