// Dieser Code wurde in IE9, Firefox, Chorme und Safe getestet und zeigte keine Probleme.
Die Renderings sind wie folgt:
Hier ist der Code:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<titels> JSON -Array in Tabelle </title> konvertieren
<meta http-äquiv = "content-type" content = "text/html; charSet = gb2312">
<style type = "text/css">
Untertitel {
Polsterung: 0 0 5px 0;
Breite: 450px;
Schriftart: ITALIC 11PX "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Text-Align: Recht;
}
td {
Grenze: 1PX Solid #C1DAD7;
Polsterung: 6PX 6PX 6PX 12px;
Farbe: #4f6b72;
Text-Align: Mitte;
Breite: 150px;
}
</style>
<script type = "text/javaScript">
var data = [{name: 'xiaoxiao', Alter: 12, Geschlecht: 'männlich'}, {name: 'xiao', Alter: 22, Geschlecht: 'männlich'}, {Name: 'HH', Alter: 12 , Geschlecht: 'weiblich'}, {Name: 'Ran', Alter: 20, Geschlecht: 'weiblich'}];
// Das Onload -Ereignis wird ausgeführt, nachdem die Webseite geladen wurde.
onload = function () {
var body = document.getElementsByTagName ('body') [0];
Body.AppendChild (creatEtable (data));
};
// Erstellen Sie eine Tabelle basierend auf dem übergebenen JSON -Array
var createTable = Funktion (Daten) {
// die Tabelle definieren
var table = document.createelement ('Tabelle');
table.setattribute ('style', 'width: 450px;');
// Definieren Sie den Tischtitel
var caption = document.createelement ('caption');
caption.innerhtml = 'Student Informationstabelle';
// Fügen Sie den Titel in die Tabelle hinzu
Tabelle.AppendChild (Bildunterschrift);
// rufen Sie die Methode createTetr () an, um die Titelzeile zu generieren und zur Tabelle hinzuzufügen.
Tabelle.AppendChild (CreateTetr ('Name', 'Alter', 'Gender'));
Tabelle.Childnodes [1] .SetatTribute ('Stil', 'Hintergrund:#cae8ea;');
//alert(Table.Firstchild);
// Für Loop -JSON -Objekt wird das Looped -Objekt durch Erstellen der () -Methode erzeugt und zur Tabelle hinzugefügt
für (var i = 0; i <data.length; i ++) {
Tabelle.AppendChild (CreateTRET (Daten [i] .Name, Daten [i] .AGE, Daten [i] .Icher));
}
Rückkehrtabelle;
};
// So generieren Sie Zeilen in einer Tabelle basierend auf den vom Benutzer gesendeten Variablen
var createTetr = Funktion (Name, Alter, Geschlecht) {
// Zeilenelement -Etikett definieren
var tr = document.createelement ('tr');
// Definieren Sie das Spaltenelement -Etikett
var tdname = document.createelement ('td');
// Legen Sie den Wert des Textknotens des Spaltenknotens fest
tdname.innerhtml = name;
var tdage = document.createelement ('td');
tdage.innerhtml = Alter;
var tdGender = document.createelement ('td');
tdgender.AppendChild (document.CreateTextNode (Geschlecht)); // äquivalent zu tdGender.innernhtml = Geschlecht;
// Spaltenwert zum Zeilenelement -Knoten hinzufügen
tr.Appendchild (tdname);
tr.Appendchild (tdage);
tr.Appendchild (tdGender);
// Geben Sie das generierte Zeilenetikett zurück
return tr;
};
</script>
</head>
<body>
</body>
</html>