用JavaScript實作類別似於ListBox功能範例程式碼_javascript技巧

JavaScript對於多項資料的請求和處理過程中，如何?常常困擾很多程式員，如何進行動態編輯和刪除而不影響其他的資料項目，今天介紹一種方法，可供借鑒，例如通過XmlRequest請求到如下資料:

複製代碼 代碼如下:

<span style="font-size:14px;">{ "Table":
[
{ "Id": 3, "Type": "X",
"Content": "黨的十八大報告指出，我國人民民主的重要形式是什嗎？",
"Akey": "基層民主政治制度", "Bkey": "人民代表大會制度",
"Ckey": "多黨合作制度", "Dkey": null, "NUM": 3 },
{ "Id": 2, "Type": "X", "Content": "藏羚羊是國家一級保護動物是（）特有動物",
"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 response = xmlHttp.responseText;
eval("var result =" + response);
var len = result.Table.length;
if (len > 0) {
var msg = "";
for (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的功能。