// Kode ini diuji di IE9, Firefox, Chorme, dan Safair dan tidak menunjukkan masalah.
Rendering adalah sebagai berikut:
Ini kodenya:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Konversi array json menjadi tabel </iteme>
<meta http-equiv = "konten tipe" content = "text/html; charset = gb2312">
<Type style = "text/css">
keterangan {
Padding: 0 0 5px 0;
Lebar: 450px;
Font: Italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Teks-Align: Benar;
}
td {
Perbatasan: 1px solid #c1dad7;
padding: 6px 6px 6px 12px;
Warna: #4F6B72;
Teks-Align: tengah;
Lebar: 150px;
}
</tyle>
<type skrip = "Teks/JavaScript">
var data = [{name: 'xiaoxiao', usia: 12, jenis kelamin: 'laki -laki'}, {name: 'xiao', usia: 22, jenis kelamin: 'pria'}, {name: 'hh', usia: 12 , gender: 'betina'}, {name: 'ran', usia: 20, gender: 'betina'}];
// Acara Onload dieksekusi setelah halaman web dimuat.
onload = function () {
var body = document.getElementsbyTagname ('body') [0];
Body.AppendChild (CreateTable (Data));
};
// Buat tabel berdasarkan array JSON yang dilewati
var createTable = function (data) {
// Tentukan tabel
var table = document.createElement ('tabel');
table.setAttribute ('style', 'width: 450px;');
// Tentukan judul tabel
var caption = document.createElement ('caption');
caption.innerhtml = 'Tabel Informasi Siswa';
// Tambahkan judul ke dalam tabel
Table.AppendChild (Keterangan);
// Call createTr () Metode untuk menghasilkan baris judul dan menambahkannya ke tabel.
Table.AppendChild (CreateTr ('Name', 'Age', 'Gender'));
Table.Childnodes [1] .setAttribute ('style', 'latar belakang:#cae8ea;');
//alert(table.firstchild);
// Untuk objek loop JSON, maka objek looped dihasilkan dengan membuat metode () dan ditambahkan ke tabel
untuk (var i = 0; i <data.length; i ++) {
Table.AppendChild (CreateTr (data [i] .name, data [i] .age, data [i] .gender));
}
meja kembali;
};
// Cara Menghasilkan Baris dalam Tabel Berdasarkan Variabel yang Dikirim oleh Pengguna
var createTr = fungsi (nama, usia, jenis kelamin) {
// Tentukan label elemen baris
var tr = document.createElement ('tr');
// Tentukan label elemen kolom
var tdname = document.createElement ('td');
// Atur nilai node teks dari node kolom
tdname.innerhtml = name;
var tdage = document.createElement ('td');
tdage.innerhtml = usia;
var tdgender = document.createElement ('td');
tdgender.AppendChild (document.createTextNode (gender)); // setara dengan tdgender.innerhtml = gender;
// Tambahkan nilai kolom ke simpul elemen baris
tr.AppendChild (TDNAME);
tr.AppendChild (tdage);
tr.AppendChild (tdgender);
// Kembalikan label baris yang dihasilkan
mengembalikan tr;
};
</script>
</head>
<body>
</body>
</html>