Archivo de la etiqueta: create

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.addClass(cssName);
$.each(json, function(k, v) {
var o = json[k];
var row = $(‘
‘);

$.each(o, function(a, b) {
if (withHeader && k == 0)
{
var head = $(”);
head.text(a);
table.append(head);
}
var cell = $(”);
cell.text(b);
row.append(cell);
});
table.append(row);
});
$(‘#’ + containerID).append(table);
}

FULL SAMPLE

Autor: Matías Creimerman

Personal Website
Linkedin Profile

Blog
GitHub
Facebook
Twitter
Google+
Youtube
Asp.Net Member Profile
MVA Profile
MCP Profile (Microsoft Certifications)

 

Matías Creimerman

Matías Creimerman Certifications

Matias Creimerman

 

Anuncios

Deja un comentario

Archivado bajo Código