Poblar tabla con JSON
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
function poblarTabla(){
jsonObjPersona = [];
var persona = new Object();
persona.numeroDocumento = "12345678";
persona.nombres = "Jorge";
jsonObjPersona.push(persona);
var persona = new Object();
persona.numeroDocumento = "12345679";
persona.nombres = "Christian";
jsonObjPersona.push(persona);
var persona = new Object();
persona.numeroDocumento = "12345670";
persona.nombres = "Mario";
jsonObjPersona.push(persona);
alert("jsonObjPersona : " + JSON.stringify(jsonObjPersona));
fila = "";
$.each(jsonObjPersona, function(idx, obj){
fila += "<tr>";
fila += "<td>" + obj.numeroDocumento + "</td><td>" + obj.nombres + "</td>";
fila += "</tr>";
});
$("#tablaPersonas tbody").html(fila);
}
</script>
</head>
<body>
<input type="button" value="Mostrar Nombres" onclick="poblarTabla();">
<table id="tablaPersonas" border="1">
<thead>
<tr>
<th>Nro.Documento</th>
<th>Nombres</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
function poblarTabla(){
jsonObjPersona = [];
var persona = new Object();
persona.numeroDocumento = "12345678";
persona.nombres = "Jorge";
jsonObjPersona.push(persona);
var persona = new Object();
persona.numeroDocumento = "12345679";
persona.nombres = "Christian";
jsonObjPersona.push(persona);
var persona = new Object();
persona.numeroDocumento = "12345670";
persona.nombres = "Mario";
jsonObjPersona.push(persona);
alert("jsonObjPersona : " + JSON.stringify(jsonObjPersona));
fila = "";
$.each(jsonObjPersona, function(idx, obj){
fila += "<tr>";
fila += "<td>" + obj.numeroDocumento + "</td><td>" + obj.nombres + "</td>";
fila += "</tr>";
});
$("#tablaPersonas tbody").html(fila);
}
</script>
</head>
<body>
<input type="button" value="Mostrar Nombres" onclick="poblarTabla();">
<table id="tablaPersonas" border="1">
<thead>
<tr>
<th>Nro.Documento</th>
<th>Nombres</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
Comentarios
Publicar un comentario