// Este código se probó en IE9, Firefox, Chorme y Safair y no mostré problemas.
Las representaciones son las siguientes:
Aquí está el código:
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> Convertir la matriz JSON en la tabla </title>
<meta http-oquiv = "content-type" content = "text/html; charset = gb2312">
<Style type = "text/css">
subtítulo {
relleno: 0 0 5px 0;
Ancho: 450px;
FUENT: cursiva 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Text-Align: Right;
}
TD {
Border: 1px Solid #C1Dad7;
relleno: 6px 6px 6px 12px;
Color: #4f6b72;
Text-Align: Center;
Ancho: 150px;
}
</style>
<script type = "text/javaScript">
var data = [{nombre: 'xiaoxiao', edad: 12, género: 'masculino'}, {nombre: 'xiao', edad: 22, género: 'masculino'}, {nombre: 'hh', edad: 12 , género: 'femenino'}, {nombre: 'ran', edad: 20, género: 'femenino'}];
// El evento de Onload se ejecuta después de cargar la página web.
onload = function () {
var cuerpo = document.getElementsByTagName ('Body') [0];
Body.AppendChild (createTable (datos));
};
// Crear una tabla basada en la matriz JSON pasada
var createTable = function (data) {
// Defina la tabla
var tabla = document.createElement ('tabla');
table.SetAttribute ('estilo', 'ancho: 450px;');
// Defina el título de la tabla
Var subtítulos = document.createElement ('subtítulos');
subtitt.innerhtml = 'tabla de información del estudiante';
// Agregar el título a la mesa
table.appendChild (subtítulo);
// Llame al método createtr () para generar la línea de título y agregarla a la tabla.
table.AppendChild (createtr ('nombre', 'edad', 'género'));
table.childnodes [1] .SetAttribute ('estilo', 'fondo:#cae8ea;');
//alert(table.firstchild);
// para el objeto json bucle, luego el objeto enrollado se genera mediante el método creandoTr () y se agrega a la tabla
for (var i = 0; i <data.length; i ++) {
table.appendChild (createTr (datos [i] .name, datos [i] .age, datos [i] .género));
}
tabla de retorno;
};
// Cómo generar filas en una tabla basada en las variables enviadas por el usuario
var createetr = function (nombre, edad, género) {
// Definir la etiqueta del elemento de fila
var tr = document.createElement ('tr');
// Defina la etiqueta del elemento de columna
var tdname = document.createElement ('td');
// Establecer el valor del nodo de texto del nodo de columna
tdname.innerhtml = name;
var tDage = document.createElement ('td');
tDage.innerhtml = edad;
var tdgender = document.createElement ('td');
tdgender.appendChild (document.createTextNode (género)); // equivalente a tdgender.innerhtml = género;
// Agregar valor de columna al nodo de elemento fila
tr.appendChild (tdname);
tr.appendChild (TDAGE);
Tr.AppendChild (tdgender);
// devuelve la etiqueta de fila generada
regresar tr;
};
</script>
</ablo>
<Body>
</body>
</html>