agregar una fila en una posicion determinada

zyon · #1 (**permalink**) 05/09/2007, 13:21

Que tal, estoy tatando de hacer una tabla con X datos, entonces esos datos pueden tener subdatos( como un navegador de windows ), osea que intento hacer que al darle clic a un boton se muetre abajo de esa fila los subdatos que le corresponden mostrando otra tabla...

ya he logrado hacer que de agreguen filas a mi tabla, solo que necesito que esa fila se agregue enseguida de la fila que elijo, por ejemplo, si tengo una tabla de 3 filas y 5 columnas, si le doy clic a la 2da fila quiero que se desplieguen mas filas enseguida de esa fila, es posible hacerlo? de antemano graciotas!

derkenuke · #2 (**permalink**) 05/09/2007, 17:59

Hola zyon.

Con un código así -que está rulando por aquí uno parecido- creo que te bastará:

Código PHP:

  <html>

<head>

<title>

    Tablas

</title>

<script type="text/javascript">

function agregaFila(pos, txt1, txt2)    {

    var miTabla = document.getElementById("cuerpoTabla");

    var fila = document.createElement("tr");

    var celda1 = document.createElement("td");

    var celda2 = document.createElement("td");

    celda1.innerHTML = txt1;

    celda2.innerHTML = txt2;

    fila.appendChild(celda1);

    fila.appendChild(celda2);

    var TRs = miTabla.getElementsByTagName("TR");

    if( TRs[pos] ) {

        miTabla.insertBefore(fila, TRs[pos]);

    }

    else {

        miTabla.appendChild(fila);

    }

}

</script>

</head>

<body> 

<form name="form" action="hola.html">

    <table id="unaTabla" border="1">

    <tbody id="cuerpoTabla">

         <tr id="a1">

              <td id="b1">hola b1</td>

              <td id="c1">hola c1</td>

         </tr>

         <tr id="a2">

              <td id="b2">hola b2</td>

              <td id="c2">hola c2</td>

         </tr>

         <tr id="a3">

              <td id="b3">hola b3</td>

              <td id="c3">hola c3</td>

         </tr>

         <tr id="a4">

              <td id="b4">hola b4</td>

              <td id="c4">hola c4</td>

         </tr>

         <tr id="a5">

              <td id="b5">hola b5</td>

              <td id="c5">hola c5</td>

         </tr>

        </tbody> 

    </table>

    <button type="button" onclick="agregaFila(3, 'en medio', 'hola')">Añade antes de 3</button><br/>

    <button type="submit">Enviar!</button>

</form>

</body> 

</html>

Puedes insertar filas donde quieras con el contenido que quieras. Basta con cambiar los parámetros. El truco: insertBefore().

Un saludo.

zyon · #3 (**permalink**) 06/09/2007, 06:12

que tal derkenuke de nuevo gracias, al igual que mi otro tema tambien lo pude encontrar esa funcion en una pagina de JavierB (saludos

) , como mis tablas pueden variar de tamaño e ignoror como saber el numero que tiene un TR pues lo hago usando el getelementById en lugar del getElementsByTagName pero supongo que no hya problema por eso XD, de nuevo gracias!

derkenuke · #4 (**permalink**) 06/09/2007, 15:45

De nada!

caricatos · #5 (**permalink**) 06/09/2007, 16:04

Cita:

Iniciado por zyon

que tal derkenuke de nuevo gracias, al igual que mi otro tema tambien lo pude encontrar esa funcion en una pagina de JavierB (saludos

) , como mis tablas pueden variar de tamaño e ignoror como saber el numero que tiene un TR pues lo hago usando el getelementById en lugar del getElementsByTagName pero supongo que no hya problema por eso XD, de nuevo gracias!

¡Je, je!

Recuerdo que hemos coincidido JavierB y yo en un mensaje muy viejo: Como adiciono filas en una tabla dinámicamente...

Saludos

zyon · #6 (**permalink**) 07/09/2007, 06:50

que tal caricatos pues entre y cheque ese viejo mensaje y no se si me quisiste dar a entender algo jeje, sorry... hay algún detalle que deba observar? es todaviamuy tempra y estoy medio tarugo

caricatos · #7 (**permalink**) 07/09/2007, 08:36

Cita:

Iniciado por zyon

que tal caricatos pues entre y cheque ese viejo mensaje y no se si me quisiste dar a entender algo jeje, sorry... hay algún detalle que deba observar? es todaviamuy tempra y estoy medio tarugo

Hola:

Me parece que no te quise hacer ningún guiño... solo que reconocí el estilo y con el mensaje original supuse que sería mejor estudiar el código... pero a la vez pone una variante para borrar indicando la fila... aunque adicionar es un poco más complejo...

Saludos

zyon · #8 (**permalink**) 07/09/2007, 12:41

ok, de todos modos me sirvio esa liga, checandole me di cuenta de como ahorrarme un par d elineas de código, gracias por tus comentarios!!!

nares_buvi · #9 (**permalink**) 18/10/2007, 10:33

Cita:

Iniciado por derkenuke

Hola zyon.

Con un código así -que está rulando por aquí uno parecido- creo que te bastará:

Código PHP:

  <html>

<head>

<title>

    Tablas

</title>

<script type="text/javascript">

function agregaFila(pos, txt1, txt2)    {

    var miTabla = document.getElementById("cuerpoTabla");

    var fila = document.createElement("tr");

    var celda1 = document.createElement("td");

    var celda2 = document.createElement("td");

    celda1.innerHTML = txt1;

    celda2.innerHTML = txt2;

    fila.appendChild(celda1);

    fila.appendChild(celda2);

    var TRs = miTabla.getElementsByTagName("TR");

    if( TRs[pos] ) {

        miTabla.insertBefore(fila, TRs[pos]);

    }

    else {

        miTabla.appendChild(fila);

    }

}

</script>

</head>

<body> 

<form name="form" action="hola.html">

    <table id="unaTabla" border="1">

    <tbody id="cuerpoTabla">

         <tr id="a1">

              <td id="b1">hola b1</td>

              <td id="c1">hola c1</td>

         </tr>

         <tr id="a2">

              <td id="b2">hola b2</td>

              <td id="c2">hola c2</td>

         </tr>

         <tr id="a3">

              <td id="b3">hola b3</td>

              <td id="c3">hola c3</td>

         </tr>

         <tr id="a4">

              <td id="b4">hola b4</td>

              <td id="c4">hola c4</td>

         </tr>

         <tr id="a5">

              <td id="b5">hola b5</td>

              <td id="c5">hola c5</td>

         </tr>

        </tbody> 

    </table>

    <button type="button" onclick="agregaFila(3, 'en medio', 'hola')">Añade antes de 3</button><br/>

    <button type="submit">Enviar!</button>

</form>

</body> 

</html>

Puedes insertar filas donde quieras con el contenido que quieras. Basta con cambiar los parámetros. El truco: insertBefore().

Un saludo.

hola tengo un problema con una tabla sera que me puedes ayudar porfavor

lo que pasa es que en una fila tengo una caja de texto y en la parte de abajo un textarea o una area de texto quiero que a medida que se le vaya dando click en un enlaces me valla insertando fila por fila y que ademas de eso quiero que me guarde esa informacion que se esra esclibiendo en esa caja de texto y en ese texarea

gracias si me puedes colabora

MaBoRaK · #10 (**permalink**) 18/10/2007, 11:33

loading..........

Bueno, respondiendo a la pregunta del topic. Puedes ahorrarte mucho código si haces:

Código PHP:

  var nuevaFila = tuObjetoTABLE.insertRow(posicion);
var algunTD = nuevaFile.insertCell(0);
var algunTD = nuevaFile.insertCell(1);
var algunTD = nuevaFile.insertCell(2);

el método insertRow inserta una fila y el método insertCell una columna.

si la posición es -1 entonces se insertará al final.

connection closed.