เมื่อ JavaScript ร้องขอและประมวลผลข้อมูลหลายรายการ มันมักจะสร้างปัญหาให้กับโปรแกรมเมอร์จำนวนมากถึงวิธีการแก้ไขและลบข้อมูลแบบไดนามิกโดยไม่ส่งผลกระทบต่อรายการข้อมูลอื่นๆ
คัดลอกรหัสรหัสดังต่อไปนี้:
<span style="font-size:14px;">{ "ตาราง":
-
{ "รหัส": 3, "ประเภท": "X",
"เนื้อหา": "รายงานของสภาแห่งชาติครั้งที่ 18 ของพรรคคอมมิวนิสต์จีนชี้ให้เห็นว่าระบอบประชาธิปไตยของประชาชนในรูปแบบที่สำคัญในประเทศของเราคืออะไร",
"Akey": "ระบบการเมืองประชาธิปไตยระดับรากหญ้า", "Bkey": "ระบบรัฐสภาของประชาชน",
"Ckey": "ระบบความร่วมมือหลายฝ่าย", "Dkey": null, "NUM": 3 },
{ "Id": 2, "Type": "X", "Content": "ละมั่งทิเบตเป็นสัตว์คุ้มครองระดับ 1 ของประเทศ และเป็นสัตว์ที่มีลักษณะเฉพาะของ ()",
"Akey": "ที่ราบสูงชิงไห่-ทิเบต", "Bkey": "ซินเจียง",
"Ckey": "ชิงไห่", "Dkey": null, "NUM": 2 },
{ "Id": 1, "Type": "X", "Content": "การปกป้องสัตว์ป่ามีความหมายมากมาย และสิ่งที่ไม่ได้เป็นส่วนหนึ่งของความหมายก็คือ",
"Akey": "ผลกระทบต่อสิ่งแวดล้อม", "Bkey": "คุณค่าทางวัฒนธรรม",
"Ckey": "กำลังดูค่า", "Dkey": null, "NUM": 1 }
-
</span>
วิธีแสดงในรูปแบบ HTML และใช้งานการแก้ไขและการลบ ซึ่งเกี่ยวข้องกับการแยกวิเคราะห์ json และการแสดงข้อมูลแบบลำดับชั้น:
แท็กแสดงผล HTML:
<ul id="msg" name="msg"> </ul>
JavaScript แยกวิเคราะห์ข้อมูลและแสดง:
คัดลอกรหัสรหัสดังต่อไปนี้:
<span style="font-size:14px;"> การตอบสนอง var = xmlHttp.responseText;
eval("var result =" + การตอบสนอง);
var len = result.Table.length;
ถ้า (เลน > 0) {
var msg = "";
สำหรับ (var i = 0; i <len; i++) {
msg += "<li><span>" + result.Table[i].Content + "</span>";
msg += "<span>" + result.Table[i].Akey + "</span>";
msg += "<span>" + result.Table[i].Bkey + "</span>";
msg += "<span>" + result.Table[i].Ckey + "</span>";
msg += "<span>" + result.Table[i].Dkey + "</span>";
msg += "<a href='###' onclick=/"editSub('" + result.Table[i].Id + "')/">แก้ไข</a>";
msg += " <a href='###' onclick='Delete(" + result.Table[i].Id + ")'>ลบ</a>";
msg += "</li>";
-
document.getElementById("msg").innerHTML = msg;
</span>
ข้อมูลแต่ละชิ้นสามารถประมวลผลผ่านฟังก์ชัน editSub(id) และ Delete(id) เพื่อให้ได้ฟังก์ชันที่คล้ายกับ ListBox