The JavaScript implementation is similar to the ListBox function sample code

JavaScript for a number of data requests and processing process, how to achieve it often bothers many programmers, how to do dynamic editing and deleting without affecting other data items, today introduced a method for reference, for example, through XmlRequest request to the following data:

 
<span style="font-size:14px;">{ "Table": 
[ 
{ "Id": 3, "Type": "X", 
"Content": " What is the important form of people's democracy in our country? ", 
"Akey": " Grassroots democratic political system ", "Bkey": " The system of people's congresses ", 
"Ckey": " A system of multi-party cooperation ", "Dkey": null, "NUM": 3 }, 
{ "Id": 2, "Type": "X", "Content": " The Tibetan antelope is a class I protected animal and is endemic to () ", 
"Akey": " The Tibetan plateau ", "Bkey": " xinjiang ", 
"Ckey": " qinghai ", "Dkey": null, "NUM": 2 }, 
{ "Id": 1, "Type": "X", "Content": " The protection of wild animals has many meanings, but not its meaning is ", 
"Akey": " Environmental effect ", "Bkey": " Cultural value ", 
"Ckey": " Ornamental value ", "Dkey": null, "NUM": 1 } 
] 
}</span> 

How to display them in HTML and achieve editing and deletion, which involves json parsing and hierarchical display of data:

HTML display tags:

< Ul id = "MSG" name = "MSG" > < / ul>

JavaScript parses the data and displays:

 
<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 + "')"> The editor </a>"; 
msg += " <a href='###' onclick='Delete(" + result.Table[i].Id + ")'> delete </a>"; 
msg += "</li>"; 
} 
document.getElementById("msg").innerHTML = msg; 
}</span> 

With the editSub(id) and Delete(id) functions, each piece of data can be processed, similar to the ListBox.