//تم اختبار هذا الرمز في IE9 ، و Firefox ، و Chorme ، و Safair وأظهرت أي مشاكل.
العروض كما يلي:
ها هو الرمز:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> تحويل صفيف JSON إلى جدول </title>
<meta http-equiv = "content-type" content = "text/html ؛ charset = gb2312">
<type type = "text/css">
التسمية التوضيحية {
الحشو: 0 0 5px 0 ؛
العرض: 450 بكسل ؛
الخط: مائل 11px "Trebuchet MS" ، Verdana ، Arial ، Helvetica ، Sans-Serif ؛
محاذاة النص: صحيح ؛
}
td {
الحدود: 1 بكسل Solid #C1DAD7 ؛
Padding: 6px 6px 6px 12px ؛
اللون: #4F6B72 ؛
محاذاة النص: المركز ؛
العرض: 150 بكسل ؛
}
</style>
<script type = "text/javaScript">
var data = [{name: 'xiaoxiao' ، العمر: 12 ، الجنس: 'ذكر'} ، {name: 'xiao' ، العمر: 22 ، الجنس: 'ذكر'} ، {name: 'hh' ، العمر: 12 ، الجنس: 'أنثى'} ، {name: 'ran' ، العمر: 20 ، الجنس: 'أنثى'}] ؛
// يتم تنفيذ حدث ONLOAD بعد تحميل صفحة الويب.
onload = function () {
var body = document.getElementSbyTagName ('body') [0] ؛
body.appendChild (createTable (data)) ؛
} ؛
// قم بإنشاء جدول يعتمد على صفيف JSON الذي تم تمريره
var createTable = function (data) {
// تحديد الجدول
var table = document.createElement ('table') ؛
table.setattribute ('style' ، 'العرض: 450px ؛') ؛
// تحديد عنوان الجدول
var caption = document.createElement ('Caption') ؛
caption.innerhtml = "جدول معلومات الطالب" ؛
// أضف العنوان إلى الجدول
Table.AppendChild (Caption) ؛
// Call Createtr () طريقة لإنشاء خط العنوان وإضافته إلى الجدول.
Table.AppendChild (createtr ("name" ، "Age" ، "Gender")) ؛
Table.ChildNodes [1] .SetAttribute ('style' ، 'background:#cae8ea ؛') ؛
//alert(table.firstchild) ؛
// لكائن JSON الحلقة ، ثم يتم إنشاء الكائن المحلق عن طريق CreateTr () وإضافته إلى الجدول
لـ (var i = 0 ؛ i <data.length ؛ i ++) {
Table.AppendChild (CreateTr (Data [i] .Name ، data [i] .age ، data [i] .gender)) ؛
}
جدول العودة
} ؛
// كيفية إنشاء صفوف في جدول بناءً على المتغيرات التي أرسلها المستخدم
var createtr = function (الاسم والعمر والجنس) {
// تحديد ملصق عنصر الصف
var tr = document.createElement ('tr') ؛
// تحديد ملصق عنصر العمود
var tdname = document.createElement ('td') ؛
// اضبط قيمة عقدة النص لعقدة العمود
tdname.innerhtml = name ؛
var tdage = document.createElement ('td') ؛
tdage.innerhtml = العمر ؛
var tdgender = document.createElement ('td') ؛
tdgender.appendChild (document.createTextNode (الجنس)) ؛ // يعادل tdgender.innerhtml = الجنس ؛
// أضف قيمة العمود إلى عقدة عنصر الصف
tr.appendchild (tdname) ؛
tr.appendchild (tdage) ؛
tr.appendchild (tdgender) ؛
// إرجاع ملصق الصف الذي تم إنشاؤه
إرجاع TR ؛
} ؛
</script>
</head>
<body>
</body>
</html>