JavaScript实现动态列表编辑与删除功能示例

数据请求与JSON结构示例

在JavaScript处理多项数据请求与交互的场景中，如何高效实现动态编辑与删除且不影响其他数据项，常令开发者困扰。本文提供一种可行方案供参考。例如，通过XMLHttpRequest请求获取如下数据格式：

<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渲染与JavaScript解析实现

接下来探讨如何在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的交互功能。