Use JavaScript to implement sample code similar to ListBox functions

Use JavaScript to implement sample code similar to ListBox functions_javascript skills

WBOY

Release： 2016-05-16 16:56:10

Original

1109 people have browsed it

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 code The code is as follows:

 
{ "Table": 
[ 
{ "Id": 3, "Type": "X", 
"Content": "The report of the 18th National Congress of the Communist Party of my country pointed out that our people What are the important forms of democracy? ", 
"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 } 
] 
} 

How to correct They display in HTML and implement editing and deletion work, which involves json parsing and hierarchical display of data:

HTML display tag:

JavaScript parses the data and displays:

Copy code The code is as follows:

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 = "

" result.Table[i].Content "";
msg = "" result.Table[i].Akey "< /span>";
msg = "" result.Table[i].Bkey "";
msg = "" result.Table[i]. Ckey "";
msg = "" result.Table[i].Dkey "";
msg = "Edit";
msg = " Delete";
msg = "

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

Each piece of data can be processed through the editSub(id) and Delete(id) functions to achieve functions similar to ListBox .