用JavaScript实现类似于ListBox功能示例代码

前端技术 2023/09/08 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的功能。

本文地址：https://www.stayed.cn/item/21118

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案