动态数据管理
一个可定制的动态文本输入列表管理功能，主要用于Web应用程序中，允许用户按需添加和操作多个文本输入项。通过此功能，用户可以根据实际需求灵活地增加、删除和重新排序多个文本输入项，极大地提高了交互性和定制性。
1、构造HTML结构
使用!DOCTYPE html声明文档类型，并通过html:5的快捷代码创建HTML5的基础结，然后设置语言和标题。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态数据</title>
</head>
<body>
<div class="main">
<a href="javascript:addinput('#texts','text-item-tpl');" class="btn btn-default">添加步骤</a>
<ul id="texts">
//列表
</ul>
</div>
</body>
</html>2、定义与复用模板
<script type="text/html" id="text-item-tpl">
<li id="save-text{id}">
<input class="form-control" type="text" name="a1[]" value="" title="内容">
<a class="btn btn-danger" href="javascript:removeImageById('{id}');">删除</a>
<a class="btn btn-success" href="javascript:moveImageDownById('{id}');">下移</a>
</li>
</script>3、添加模块函数
// 定义一个名为addinput的函数，接收二个参数：容器的选择器字符串和模板元素的ID
function addinput(container_selector, item_tpl_wrapper_id) {
// 获取ID为item_tpl_wrapper_id的DOM元素
let tplWrapper = document.getElementById(item_tpl_wrapper_id);
// 获取模板元素的HTML内容，并将其赋值给变量tpl
let tpl = tplWrapper.innerHTML;
// 使用正则表达式将模板字符串中的{id}替换为当前时间戳（毫秒级）
tpl = tpl.replace(/\{id\}/g, Date.now());
// 创建一个新的div元素
let newElement = document.createElement('div');
// 将处理过的模板字符串赋值给新创建的div元素的innerHTML属性
newElement.innerHTML = tpl;
// 使用container_selector查询并获取目标容器元素
let targetElement = document.querySelector(container_selector);
// 遍历新创建的div元素的所有子节点，并将它们逐个添加到目标容器元素中
while (newElement.firstChild) {
// 获取div元素的第一个子节点
let child = newElement.firstChild;
// 将子节点添加到目标容器元素中
targetElement.appendChild(child);
}
}4、删除模块函数
function removeImageById(id) {
// 使用querySelector查找id为'save-text'后接传入id参数的元素
let element = document.querySelector('#save-text' + id);
// 如果找到对应的元素
if (element) {
// 从其父节点中删除该元素
element.parentNode.removeChild(element);
}
}5、下移模块函数
function moveImageDownById(id) {
// 获取id为'save-text'后接传入id参数的当前元素
let currentElement = document.querySelector('#save-text' + id);
// 获取当前元素的下一个兄弟元素
let nextElement = currentElement.nextElementSibling;
// 如果存在下一个兄弟元素
if (nextElement) {
// 将下一个兄弟元素插入到当前元素之前，实现当前元素的下移
currentElement.parentNode.insertBefore(nextElement, currentElement);
}
}6、美化
.main a {
color: #1d4c7d;
font-size: 14px;
text-decoration: none;
}
.main ul {
list-style: none;
padding: 0;
margin-top: 15px;
}
#texts li {
margin-bottom: 10px;
}
#texts input {
padding: 0.25em 0.25em 0.25em 0.25em;
border: 1px solid #ccc;
background-position: bottom;
background: #fff;
font-size: 1em;
width: 200px;
}7、完
效果演示
文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。
文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。
