报销明细表单通过template克隆实现动态增删：新增时克隆模板、重置值并更新name索引；删除用事件代理移除行后重排索引；提交前校验并组装JSON数据。
用 HTML + JavaScript 实现报销明细表单的多条费用记录动态增删，核心是“模板复用 + DOM 操作 + 数据同步”。不需要框架也能做到清晰、稳定、易维护。
1. 结构设计：用模板行（template）避免重复拼接字符串
把一条费用记录的 HTML 写成 ，每次新增就克隆它，而不是用字符串拼接或 innerHTML 拼接——这样更安全、语义清晰、便于后续取值和校验。
- 每行包含费用类型 select、金额 input、日期 input、备注 textarea 等字段
- 所有字段 name 属性带数组形式，如
name="items[0][amount]"，方便后端接收为结构化数组 - 给每行容器加唯一 class（如
class="expense-item"）和 data-index，便于定位和更新序号
2. 新增一行：克隆模板 + 重置值 + 更新索引与 name
点击“添加费用”按钮时，从 template 克隆内容，插入到列表末尾，并修正所有字段的 name 和 id，确保不重复、可提交。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 先获取当前已有的 expense-item 行数（比如已有 3 行，则新行 index = 3）
- 克隆 template 内容，遍历其中每个表单控件，将 name 中的占位符（如
[*]或[0]）替换成新 index - 清空输入值（但保留 select 的默认选项），聚焦第一个可编辑字段提升体验
3. 删除某行：绑定事件代理 + 安全移除 + 重排索引
不要给每个删除按钮单独绑定事件。用事件委托监听整个明细容器，点击带 data-action="remove" 的按钮时，找到父级 .expense-item 并移除。
- 删除后立即调用“重排索引”函数：遍历剩余所有 expense-item，按顺序更新它们内部所有字段的 name（如 items[0] → items[0], items[2] → items[1]）
- 同时更新页面上显示的序号（如左侧的 “第1项”、“第2项” 文字）
- 若只剩一行，可禁用删除按钮或提示“至少保留一项”
4. 提交前校验与数据组装（可选但推荐）
点击提交时，别直接发 form，先收集所有有效费用项，做简单校验（如金额非空、大于 0），再构造 JSON 或整理为 FormData。
- 遍历所有
.expense-item，读取各字段 value，跳过空行或非法值 - 把每行转成对象：
{ type: '交通', amount: '86.5', date: '2024-05-20', remark: '高铁票' } - 可 push 到数组，JSON.stringify 后作为隐藏域提交，或用 FormData.append('items', JSON.stringify(arr)) 发送
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
