Academia de software libre

Manual básico de jQuery
Compartiendo conocimientos

Insercion de una columna 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:

$('table tr').each(function() {
// Hacemos uso del refinado transversal que nos proporciona find, para encontrar las
// etiquetas th y td contendidas en el tr en cuestion, al obtener el elemento con posición 1
// accedemos al segundo elemento de la lista que nos devuelve el find
    el = $(this).find('th,td')[1];
        // Vemos si la etiquetas corresponden TH ó TD para insertar el elemento correcto
        if( el.tagName == 'TH' )
            $('<TH>Nueva Comuna</TH>').insertBefore(el);
        else
            $('</TD>nuevo valor</TD>').insertBefore(el);
});

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.