jQuery循环遍历数组如何逐行填充表格后续tr的输入框值？

原有代码失效原因 #

• 第一版代码逻辑缺陷：循环全程that变量始终指向你初始选中的那一行<tr>，每次循环调用that.next()永远只会定位到初始行紧邻的下第一行，所有循环的赋值操作都落在同一行上，最终只会保留数组最后一个元素的赋值结果。
• 你尝试编写的循环版本存在语法和逻辑双重错误：
  • 把next定义为字符串"next()"，对字符串做自增操作没有任何实际效果
  • jQuery中next是需要加括号调用的方法，直接写that.next只会拿到方法本身的引用，不会执行DOM查找返回下一行元素，代码根本无法正常执行

你之前手动叠加next()调用（比如that.next().next().find(...)）能生效，本质是每次调用next()都会把定位的行向下移动一位，但这种硬编码写法完全没必要用循环适配。

正确实现代码 #

只需要在循环里维护一个当前行的引用，每次循环结束后把引用更新为下一行即可，不需要手动拼接next()调用：

// 初始化定位到当前触发事件的行
let currentRow = $(this).closest('tr');
for (let i = 0; i < data.length; i++) {
  // 定位到下一行
  currentRow = currentRow.next();
  // 给当前行的对应输入框赋值
  currentRow.find("[name='prod_code']").val(data[i]["prd_code"]);
  currentRow.find("[name='prod_desc']").val(data[i]["prd_desc"]);
  currentRow.find("[name='prod_qty']").val(data[i]["prd_qty"]);
}

如果要做性能优化，还可以提前缓存行内输入框的查找结果，避免每次循环重复执行DOM查询，但核心的行移动逻辑和上面的代码一致。

内容的提问来源于stack exchange，提问作者Jeff