// Ce code a été testé dans IE9, Firefox, Chorme et Safair et n'ont montré aucun problème.
Les rendus sont les suivants:
Voici le code:
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<Title> Convertir le tableau JSON en table </Title>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312">
<style type = "text / css">
légende {
rembourrage: 0 0 5px 0;
Largeur: 450px;
FONT: italique 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Texte-aligne: à droite;
}
td {
Border: 1px solide # C1DAD7;
rembourrage: 6px 6px 6px 12px;
Couleur: # 4F6B72;
Texte-aligne: Centre;
Largeur: 150px;
}
</ style>
<script type = "text / javascript">
var data = [{name: 'xiaoxiao', âge: 12, genre: 'mâle'}, {name: 'xiao', Âge: 22, genre: 'mâle'}, {name: 'hh', Âge: 12 , genre: 'femelle'}, {name: 'ran', Âge: 20, genre: 'femelle'}];
// L'événement Onload est exécuté après le chargement de la page Web.
onload = function () {
var body = document.getElementsByTagName ('body') [0];
Body.ApendChild (CreateTable (DATA));
};
// Créer un tableau basé sur le tableau JSON passé
var createTable = function (data) {
// définir la table
var table = document.CreateElement ('Table');
table.setAttribute ('style', 'width: 450px;');
// définir le titre de table
var légende = document.createElement ('légende');
légende.innerhtml = 'Table d'information étudiante';
// Ajouter le titre dans la table
table.ApendChild (légende);
// appelle la méthode CreateTr () pour générer la ligne de titre et l'ajouter à la table.
Table.ApendChild (CreateTr ('Name', 'Age', 'Gender'));
table.childnodes [1] .setAttribute ('style', 'background: # cae8ea;');
//alert(Table.FirstChild);
// Pour l'objet JSON LOOP, puis l'objet en boucle est généré par la méthode CréationTr () et ajouté au tableau
pour (var i = 0; i <data.length; i ++) {
table.APPEndChild (createTr (data [i] .name, data [i] .age, data [i] .gender));
}
table de retour;
};
// Comment générer des lignes dans un tableau en fonction des variables envoyées par l'utilisateur
var createTr = fonction (nom, âge, genre) {
// Définir l'étiquette des éléments de ligne
var tr = document.CreateElement ('tr');
// Définissez l'étiquette de l'élément de colonne
var tdname = document.createElement ('td');
// Définissez la valeur du nœud de texte du nœud de colonne
tdname.innerhtml = name;
var tdage = document.createElement ('td');
tdage.innerhtml = âge;
var tdgender = document.CreateElement ('td');
TDGender.ApendChild (document.CreateTextNode (genre)); // équivalent à tdgender.innerhtml = sexe;
// Ajouter une valeur de colonne au nœud d'élément de ligne
tr.appendChild (tdname);
Tr.APPEndChild (TDAGE);
Tr.APPEndChild (tdgender);
// Renvoie l'étiquette de ligne générée
retour tr;
};
</cript>
</ head>
<body>
</docy>
</html>