本文介绍一种不依赖 jquery 的原生 javascript 方案，通过遍历同类型输入框并比对事件目标，实时获取用户点击的 input 元素在 dom 中的顺序索引（从 0 开始），适用于动态增删表单项并与模态框数据回填联动的场景。
在构建动态表单（如物料清单、多行采购单）时，一个常见需求是：当用户点击某一行中的某个输入框（例如“Largo”或“Ancho”）后，在弹出的模态框中选择数据，再将结果精准回填到当前被点击的那个输入框。关键难点在于：这些输入框是运行时动态追加的，无法预先绑定唯一 ID 或硬编码索引。
最直接可靠的解决方案，不是靠计数器（如 numeroDeInput++），也不是给每个 input 手动加 data-index 属性（易与 DOM 状态脱节），而是在事件触发时，实时计算目标元素在其同类节点集合中的位置索引。
✅ 推荐实现方式（原生 JavaScript）
使用 document.querySelectorAll() 获取所有目标类型输入框（如 input[type="number"]），再通过循环比对 event.target 是否为当前遍历项，匹配即得索引：
const numberSelector = 'input[type="number"]';
document.querySelectorAll(numberSelector).forEach(input => {
input.addEventListener('click', function(e) {
const inputs = document.querySelectorAll(numberSelector);
const index = Array.from(inputs).indexOf(e.target);
console.log(`用户点击了第 ${index} 个 number 类型输入框`);
// ✅ 此 index 即可用于后续模态框回调中的精准赋值
// 例如：openModalAndBindCallback(index);
});
});? 提示：Array.from(inputs).indexOf(e.target) 比手动 while 循环更简洁且语义清晰，兼容现代浏览器（含 IE11+ 需 polyfill Array.from）。
⚠️ 注意事项与最佳实践
-
委托优于遍历重绑：若输入框频繁增删（如支持“添加行”/“删除行”），每次新增后重新执行 querySelectorAll().forEach(...) 会重复绑定事件，造成内存泄漏和性能浪费。推荐改用事件委托：
document.querySelector('.tableBody').addEventListener('click', function(e) { if (e.target.matches('input[type="number"]')) { const allNumbers = document.querySelectorAll('input[type="number"]'); const index = Array.from(allNumbers).indexOf(e.target); console.log('触发索引:', index); // 启动模态框，并传入 index 用于回填 openMaterialModal(index); } }); 避免 ID 冲突：示例代码中多个 input 使用了重复 id="largo"、id="ancho" 等——这是 HTML 无效写法（ID 必须唯一）。应移除这些重复 ID，改用 class 或 name 配合索引定位。
-
回填逻辑示例（模态框确认后）：
function fillInputAtIndex(index, value) { const numberInputs = document.querySelectorAll('input[type="number"]'); if (numberInputs[index]) { numberInputs[index].value = value; // 可选：触发 input 事件以通知监听器（如计算 subtotal） numberInputs[index].dispatchEvent(new Event('input', { bubbles: true })); } }
✅ 总结
获取动态输入框的触发序号，本质是「运行时定位」而非「创建时标记」。采用 Array.from(...).indexOf(event.target) 是轻量、可靠、无侵入性的标准解法；配合事件委托，可完美支撑无限增删的表单场景。无需 jQuery，不污染 HTML 结构，语义清晰，易于维护。
