Academia de software libre

Manual básico de jQuery
Compartiendo conocimientos

Insercion de una fila en una tabla.

Atienda al siguiente código HTML.

<table>
    <thead>
        <tr>
            <th>columna 1</th>
            <th>columna 2</th>
            <th>columna 3</th>
            <th>columna 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>fila 1 elemento 1</td>
            <td>fila 1 elemento 2</td>
            <td>fila 1 elemento 2</td>
            <td>fila 1 elemento 4</td>
        </tr>
        <tr>
            <td>fila 2 elemento 1</td>
            <td>fila 2 elemento 2</td>
            <td>fila 2 elemento 2</td>
            <td>fila 2 elemento 4</td>
        </tr>
    </tbody>

Ahora ahora observe el siguiente código en jQuery:

//creamos la fila nueva
fila_nueva = '<tr>'
                            '<td>fNueva elemento 1</td>'+
                            '<td>fNueva elemento 2</td>'+
                            '<td>fNueva elemento 2</td>'+
                            '<td>fNueva elemento 4</td>'+
                        '</tr>';
//la insertamos antes de la fila 3
$( $('table tr')[2] ).before(fila_nueva);

El resultado es el siguiente:

columna 1	columna 2	columna 3	columna 4
fila 1 elemento 1	fila 1 elemento 2	fila 1 elemento 2	fila 1 elemento 4
fila 2 elemento 1	fila 2 elemento 2	fila 2 elemento 2	fila 2 elemento 4

Como podemos ver acabamos de insertar una columna.