Create HTML Table from JSON – Crear tabla HTML desde un JSON


You can use this function to create a HTML table from JSON data:
HTML:

CSS:

.tableStyle
{
width: 100px;
border: 1px solid black;
}
.tableStyle th
{
color: red;
}

JS:

JSON:
var json = [{id: 1, name: ‘Carlitos’, age: 30}, {id: 2, name: ‘Miguel’, age: 32}, {id: 3, name: ‘Amanda’, age: 35}];
(You can get a Json from Ajax call)

Function call:
createTableFromJson(‘container’, json, true, ‘tableStyle’);

Function:
function createTableFromJson(containerID, json, withHeader, cssName)
{
var table = $(‘<table>’);
table.addClass(cssName);
$.each(json, function(k, v) {
var o = json[k];
var row = $(‘<tr>’);
$.each(o, function(a, b) {
if (withHeader && k == 0)
{
var head = $(‘<th>’);
head.text(a);
table.append(head);
}
var cell = $(‘<td>’);
cell.text(b);
row.append(cell);
});
table.append(row);
});
$(‘#’ + containerID).append(table);
}

FULL SAMPLE

 

Anuncios

Deja un comentario

Archivado bajo Código

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 )

Google+ photo

Estás comentando usando tu cuenta de Google+. 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 )

w

Conectando a %s