本文介绍一种无需依赖 jquery 的原生 javascript 方案，通过遍历同类型 input 元素并比对 dom 引用，实时获取当前被点击（或聚焦）的 number 类型输入框在页面中的精确索引位置，适用于动态增删行的物料表单场景。
在构建动态表单（如物料参数录入）时，一个常见需求是：当用户点击某个 input[type="number"]（例如“Largo”“Ancho”等字段），需准确识别它属于第几行、第几个同类输入框，以便后续将模态框中选择的数据精准回填至对应位置。由于元素是运行时动态添加的，不能依赖静态 index 属性或硬编码序号——而直接使用 Array.from(inputs).indexOf(event.target) 或 Array.prototype.indexOf.call() 是更简洁安全的方式，但原答案中采用的 while 循环手动比对同样可靠且兼容性极佳。
以下为推荐的优化实现（兼顾可读性、性能与健壮性）：
// 监听所有 type="number" 输入框的点击事件（支持未来动态添加的元素）
document.addEventListener('click', function (e) {
if (e.target.matches('input[type="number"]')) {
const allNumberInputs = document.querySelectorAll('input[type="number"]');
const index = Array.from(allNumberInputs).indexOf(e.target);
// ✅ 安全获取上下文行（父级 .rowCreated）
const row = e.target.closest('.rowCreated');
const rowIndex = row ? Array.from(document.querySelectorAll('.rowCreated')).indexOf(row) : -1;
console.log(`触发元素索引: ${index}, 所属行索引: ${rowIndex}`);
console.log(`占位符: "${e.target.placeholder}", 行内 name: "${e.target.name}"`);
// 示例：将该索引用于后续数据填充逻辑
// fillDataAtPosition(rowIndex, e.target.name, selectedValue);
}
});⚠️ 关键注意事项：
- 避免重复绑定：不要在每次新增行后为每个 input 单独 addEventListener（如原答案所示），否则会导致内存泄漏和事件重复触发；应统一使用事件委托（document.addEventListener + matches()）。
- 区分“全局索引”与“行内索引”：input[type="number"] 全局索引对跨行操作有用；但业务上通常更需知道它属于第几行（.rowCreated 的顺序），因此建议同时获取 rowIndex。
- name 属性已含数组标识：如 name="largo[]"，后端可自动解析为数组，前端也可通过正则提取字段类型（如 name.match(/^(largo|ancho|alto)/)[1]）增强语义化处理。
- 兼容性补充：closest() 和 matches() 在 IE 中不支持，若需兼容旧版浏览器，可用 e.target.parentNode.classList.contains('rowCreated') 替代，并手写 getParentByClass(el, 'rowCreated') 辅助函数。
总结：精准定位动态元素的核心在于「事件委托 + DOM 引用比对」，而非维护独立计数器。此方案解耦了 DOM 操作与事件逻辑，扩展性强，易于与模态框数据回填、实时计算（如 subtotal）、删除行联动等场景集成。
