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

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

複製程式碼 程式碼如下:

{ "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 }
]
}

如何對在HTML中他們進行顯示，並實現編輯和刪除工作，這裡面涉及的json解析和數據分層顯示：

HTML顯示標籤：

JavaScript解析資料並顯示：

複製程式碼 程式碼如下:

var response = xmlHttp.responseText;
eval("var result =" response);
var len = result.Table.length ;
if (len > 0) {
var msg = "";
for (var i = 0; i msg = "

" result.Table[i].Content "";
msg = "" result.Table[i].Akey "";
msg = "" result.Table[i].Bkey "";
msg = "" result.Table[i].Ckey "";
msg = "" result.Table[i].Dkey "";
msg = "編輯";
msg = " 刪除";
msg = "

";
}
document.getElementById("msg").innerHTML = msg;
}

透過editSub(id )和D​​elete(id) 函數可以多每個資料處理，實現類似ListBox的功能。