信息发布→ 登录 注册 退出

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

发布时间:2026-01-11

点击量:

JavaScript对于多项数据的请求和处理过程中,如何实现常常困扰很多程序员,如何进行动态编辑和删除而不影响其他的数据项,今天介绍一种方法,可供借鉴,例如通过XmlRequest请求到如下数据:
复制代码 代码如下:
<span style="font-size:14px;">{ "Table":
{ "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的功能。

标签:# 类似于  # 保护野生动物  # 藏羚羊  # 保护动物  # 不属  # 国家一级  # 过程中  # 如何实现  # 每条  # 于其  # 这里面  # JavaScript  # 多项  # 可供  # 新疆  # 而不  # 青海  # 其他的  # 有很多  # 的是  # 青藏高原  # ListBox  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!