// รหัสนี้ได้รับการทดสอบใน IE9, Firefox, Chorme และ Safair และไม่พบปัญหา
การเรนเดอร์มีดังนี้:
นี่คือรหัส:
การคัดลอกรหัสมีดังนี้:
<! 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">
<head>
<title> แปลงอาร์เรย์ JSON เป็นตาราง </title>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">>
<style type = "text/css">
คำบรรยายภาพ {
Padding: 0 0 5px 0;
ความกว้าง: 450px;
แบบอักษร: ตัวเอียง 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
TEXT-ALIGING: ถูกต้อง;
-
td {
ชายแดน: 1px Solid #C1DAD7;
Padding: 6px 6px 6px 12px;
สี: #4F6B72;
TEXT-ALIGN: CENTER;
ความกว้าง: 150px;
-
</style>
<script type = "text/javascript">
var data = [{ชื่อ: 'xiaoxiao', อายุ: 12, เพศ: 'ชาย'}, {ชื่อ: 'xiao', อายุ: 22, เพศ: 'ชาย'}, {ชื่อ: 'hh', อายุ: 12 , เพศ: 'หญิง'}, {ชื่อ: 'วิ่ง', อายุ: 20, เพศ: 'หญิง'}];
// เหตุการณ์ ONLOAD จะถูกดำเนินการหลังจากโหลดหน้าเว็บแล้ว
onload = function () {
var body = document.getElementsByTagname ('body') [0];
Body.AppendChild (createTable (data));
-
// สร้างตารางตามอาร์เรย์ JSON ที่ผ่าน
var createTable = function (data) {
// กำหนดตาราง
var table = document.createElement ('ตาราง');
table.setAttribute ('สไตล์', 'ความกว้าง: 450px;');
// กำหนดชื่อตาราง
var caption = document.createElement ('คำอธิบาย');
caption.innerhtml = 'ตารางข้อมูลนักเรียน';
// เพิ่มชื่อลงในตาราง
table.appendchild (คำบรรยาย);
// วิธีการเรียก createTr () เพื่อสร้างบรรทัดชื่อและเพิ่มลงในตาราง
table.appendchild (createTr ('ชื่อ', 'อายุ', 'เพศ'));
table.childnodes [1] .setAttribute ('สไตล์', 'พื้นหลัง:#cae8ea;');
//alert(table.firstchild);
// สำหรับวัตถุลูป JSON จากนั้นวัตถุลูปจะถูกสร้างขึ้นโดยวิธีการสร้าง () และเพิ่มลงในตาราง
สำหรับ (var i = 0; i <data.length; i ++) {
Table.AppendChild (createTr (data [i] .name, data [i] .age, data [i] .gender));
-
โต๊ะกลับ;
-
// วิธีการสร้างแถวในตารางตามตัวแปรที่ส่งโดยผู้ใช้
var createTet = ฟังก์ชั่น (ชื่อ, อายุ, เพศ) {
// กำหนดฉลากองค์ประกอบแถว
var tr = document.createElement ('tr');
// กำหนดฉลากองค์ประกอบคอลัมน์
var tdname = document.createElement ('td');
// ตั้งค่าของโหนดข้อความของโหนดคอลัมน์
tdname.innerhtml = ชื่อ;
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>