// Este código foi testado no IE9, Firefox, Chore e Safair e não mostrou problemas.
As renderizações são as seguintes:
Aqui está o código:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Converta JSON Array em Table </ititle>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<Style type = "text/css">
Legenda {
preenchimento: 0 0 5px 0;
Largura: 450px;
Fonte: Itálico 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Alinhamento de texto: à direita;
}
TD {
borda: 1px sólido #c1dad7;
preenchimento: 6px 6px 6px 12px;
Cor: #4F6B72;
Alinhamento de texto: centro;
Largura: 150px;
}
</style>
<script type = "text/javascript">
var dados = [{nome: 'xiaoxiao', idade: 12, sexo: 'masculino'}, {name: 'xiao', idade: 22, sexo: 'masculino'}, {name: 'hh', idade: 12 , gênero: 'feminino'}, {nome: 'ran', idade: 20, sexo: 'feminino'}];
// O evento OnLoad é executado após o carregamento da página da web.
OnLoad = function () {
var corpo = document.getElementsByTagName ('Body') [0];
body.appendChild (createTable (dados));
};
// Crie uma tabela com base na matriz JSON passada
var createTable = function (dados) {
// Defina a tabela
var tabela = document.createElement ('tabela');
tabela.setAtAttribute ('estilo', 'largura: 450px;');
// Defina o título da tabela
var lege = document.createElement ('legenda');
legend.innerhtml = 'Tabela de informações do aluno';
// Adicione o título na tabela
tabela.AppendChild (Legenda);
// Call Createtr () Método para gerar a linha de título e adicioná -lo à tabela.
tabela.AppendChild (createtr ('nome', 'idade', 'gênero'));
tabela.ChildNodes [1] .SetAttribute ('estilo', 'Antecedentes:#cae8ea;');
//alert(table.firstchild);
// Para o objeto JSON de loop, o objeto em loop é gerado pela criação do método de criação e adicionado à tabela
for (var i = 0; i <data.length; i ++) {
tabela.AppendChild (createtr (dados [i] .name, dados [i] .age, dados [i] .gender));
}
tabela de retorno;
};
// Como gerar linhas em uma tabela com base nas variáveis enviadas pelo usuário
var cremetr = function (nome, idade, sexo) {
// Defina o rótulo do elemento de linha
var tr = document.createElement ('tr');
// Defina o rótulo do elemento da coluna
var tdName = document.createElement ('td');
// Defina o valor do nó de texto do nó da coluna
tdname.innerhtml = nome;
var tdage = document.createElement ('td');
tdage.innerhtml = idade;
var tdgender = document.createElement ('td');
tdgender.appendChild (document.createTextNode (gênero)); // equivalente a tdgender.innerhtml = gênero;
// Adicione o valor da coluna ao nó do elemento de linha
tr.appendChild (tdname);
tr.appendChild (TDAGE);
tr.appendChild (tdgender);
// retorna a etiqueta de linha gerada
retornar tr;
};
</script>
</head>
<Body>
</body>
</html>