表格中每个<input>需独立校验：每行用唯一data-row-id，name带下标（如amount-0），校验结果按rowId存JS对象；事件用委托绑定在tbody上，oninput做输入净化，onblur做最终校验；错误提示用absolute定位在td内，确保聚焦可用。
表格中每个 <input> 需要独立校验逻辑，不能共用同一 name 或 id
多个表单行共用相同 name 会导致提交时只取最后一个值；共用 id 则违反 HTML 规范，document.getElementById() 只返回第一个匹配项，校验必然错乱。真实场景里，每行应有唯一标识（比如行索引或临时 ID），校验状态也得按行存储。
推荐做法是：在 <tr> 上加 data-row-id，所有该行内的 <input> 用 name 带下标（如 amount-0、amount-1），校验结果存在 JS 对象里，键为 rowId。
- 避免用
name="amount"多次出现——后端接收时会丢数据 - 不要手动写死
id="amount"多次——querySelector('#amount')永远只拿到第一行 - 校验触发时机建议用
input+blur组合：实时反馈 + 失焦兜底
oninput 和 onblur 在表格行内校验中的分工很关键
单纯靠 oninput 容易误报（比如用户刚敲个 “1”，还没输完金额就标红）；只靠 onblur 又延迟明显，体验差。实际中，金额、邮箱、必填字段可以分策略处理：
- 金额类（
type="number"）：用oninput做格式初筛（如非数字字符立即清掉），onblur做范围校验（如min="0"、max="999999"） - 邮箱类：
oninput不验证正则，等onblur再跑/^[^\s@]+@[^\s@]+\.[^\s@]+$/ - 必填字段：
oninput清除错误态，onblur检查是否为空并标红
示例片段：
<input type="number" oninput="handleInput(this)" onblur="validateRow(this)" data-field="amount">，
handleInput 里直接 this.value = this.value.replace(/[^0-9.]/g, '')，不发请求、不改样式，只做输入净化。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
动态新增行时，事件监听不能靠重复绑定 addEventListener
每次 insertRow() 后都给新 <input> 调一次 addEventListener，内存泄漏风险高，且容易漏绑（比如异步插入后 DOM 还没渲染完就绑）。更稳的方式是事件委托：把监听器挂在 <table> 或 <tbody> 上，用 event.target 判断是否为目标 input。
- 监听
input事件时，检查event.target.matches('input[data-field]') - 从
event.target往上找最近的<tr>，用它的dataset.rowId定位当前行 - 避免对
contenteditable或其他非表单元素误触发
这样新增任意多行都不需要重新绑定，也不用维护一堆监听器引用。
校验失败时，错误提示放在哪最不影响布局又清晰可见
在 <td> 里紧贴 <input> 后追加 <span class="error"> 最直接，但容易撑开单元格、破坏表格对齐。更好的方式是用 position: absolute 定位，父容器 <td> 设 position: relative，错误提示浮在右下角或 input 右侧空白处。
- 绝对定位元素需设
font-size: 12px、color: #d32f2f，避免和输入框文字重叠 - 校验通过时，用
display: none或移除元素，别只改文字为空——否则仍占渲染流 - 移动端要注意
absolute在小屏可能被截断，可 fallback 到margin-top插入提示行
真正麻烦的是跨浏览器聚焦样式（比如 Chrome 的 :focus-visible 和 Safari 的兼容性），如果用户用键盘 Tab 导航，错误行的 input 必须能被正常聚焦，否则校验反馈就断链了。
