Poblar Tablas HTML desde JavaScript (jQuery)

Entrada corta.

La escribo porque es segunda vez que tengo que buscar en mis otros sistemas para ver cómo re diantres se hacía D:

Digamos que tenemos el siguiente json

[
    {
        "PERSONA":"Juanito Perez ",
        "RUT_PERSONA":"12345678-0",
        "ID_URGENCIA":"141600",
        "CREACION":"12:33 14-FEBRERO -2013"
    },
    {
        "PERSONA":"Marito Cares",
        "RUT_PERSONA":"87654321-0",
        "ID_URGENCIA":"141597",
        "CREACION":"12:33 14-FEBRERO -2013"
    }
]

Y lo queremos dejar en una tabla de manera dinámica (osea que si, en vez de ser 2 registros fueran 3, se llenara solo😀 )

Simple, primero definimos una tabla vacía, dándole un ID

<table class="table table-hover" id="tabla_aTraspasar">
    <thead>
        <tr>
            <th>FOLIO</th>
            <th>RUT</th>
            <th>Persona</th>
            <th>Fecha</th>
            <th>Recepcionar</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table> 

Ahora usando jQuery:

for(x in parse){
    $("#tabla_aTraspasar").find('tbody')
        .append($('<tr>')
            .append($('<td>').text(parse[x]["ID_URGENCIA"]))
            .append($('<td>').text(parse[x]["RUT_PERSONA"]))
            .append($('<td>').text(parse[x]["PERSONA"]))
            .append($('<td>').text(parse[x]["CREACION"]))
        );
}

Donde parse es el objeto json previamente parseado.

Eso es todo. Lo que hacemos es ir al tbody de la tabla con id tabla_aTraspasar y agregarle un nodo tr. A ese tr agregarle un td

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en JavaScript, Tips. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s