When JavaScript requests and processes multiple data, it often troubles many programmers how to implement it. How to dynamically edit and delete without affecting other data items. Today we introduce a method for reference. For example, request the following through XmlRequest. data:
Copy the code code as follows:
<span style="font-size:14px;">{ "Table":
[
{ "Id": 3, "Type": "X",
"Content": "The report of the 18th National Congress of the Communist Party of China pointed out that what are the important forms of people's democracy in our country?",
"Akey": "Grassroots democratic political system", "Bkey": "People's Congress system",
"Ckey": "Multi-Party Cooperation System", "Dkey": null, "NUM": 3 },
{ "Id": 2, "Type": "X", "Content": "Tibetan antelope is a national first-level protected animal and is a unique animal of ()",
"Akey": "Qinghai-Tibet Plateau", "Bkey": "Xinjiang",
"Ckey": "Qinghai", "Dkey": null, "NUM": 2 },
{ "Id": 1, "Type": "X", "Content": "Protecting wild animals has many meanings, and what is not part of it is",
"Akey": "Environmental Effect", "Bkey": "Cultural Value",
"Ckey": "Viewing value", "Dkey": null, "NUM": 1 }
]
}</span>
How to display them in HTML and implement editing and deletion work, which involves json parsing and hierarchical display of data:
HTML display tag:
<ul id="msg" name="msg"> </ul>
JavaScript parses the data and displays:
Copy the code code as follows:
<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 + "')/">Edit</a>";
msg += " <a href='###' onclick='Delete(" + result.Table[i].Id + ")'>Delete</a>";
msg += "</li>";
}
document.getElementById("msg").innerHTML = msg;
}</span>
Each piece of data can be processed through the editSub(id) and Delete(id) functions to achieve functions similar to ListBox.