JavaScript表格多行插入数据库时仅最后一行数据生效问题

问题本质 #

你碰到的是循环里变量作用域复用导致的经典bug：不管是同步还是异步插入操作，循环中如果复用了同一个变量（比如在循环外声明数据对象、用var声明循环变量），最终所有插入操作都会指向最后一次循环的变量值——因为循环结束时变量已经被最后一行数据覆盖了。

具体修复方案 #

1. 避免循环变量作用域泄漏（异步场景常用） #

如果你的数据库插入是异步操作（比如用Promise、回调函数），最常见的问题是循环变量的作用域没有隔离。

错误代码示例：

const rows = document.querySelectorAll('.table-row');
// 用var声明i，作用域是整个函数，循环结束后i是最后一行的索引
for (var i = 0; i < rows.length; i++) {
  const row = rows[i];
  const data = {
    name: row.querySelector('.name-input').value,
    value: row.querySelector('.value-input').value
  };
  // 异步操作会保留对data的引用，循环结束后data已经是最后一行的数据
  db.insert(data).then(() => console.log('插入完成'));
}

修复方式：

• 用ES6的let声明循环变量：let会在每次循环中创建独立的作用域，确保每个异步操作引用的是当前循环的变量：

const rows = document.querySelectorAll('.table-row');
for (let i = 0; i < rows.length; i++) {
  const row = rows[i];
  const data = {
    name: row.querySelector('.name-input').value,
    value: row.querySelector('.value-input').value
  };
  db.insert(data).then(() => console.log(`第${i+1}行插入成功`));
}

• 兼容旧环境用立即执行函数（IIFE）：手动创建独立作用域包裹循环逻辑：

const rows = document.querySelectorAll('.table-row');
for (var i = 0; i < rows.length; i++) {
  // 把当前行和索引作为参数传入IIFE，形成独立作用域
  (function(currentRow, idx) {
    const data = {
      name: currentRow.querySelector('.name-input').value,
      value: currentRow.querySelector('.value-input').value
    };
    db.insert(data).then(() => console.log(`第${idx+1}行插入成功`));
  })(rows[i], i);
}

2. 同步场景：别复用同一个数据对象 #

如果插入是同步操作，大概率是你在循环外声明了数据对象，每次循环只修改它的属性——这样所有插入操作传的都是同一个对象的引用，最后对象被最后一行数据覆盖：

错误代码示例：

// 循环外声明data，所有循环都修改同一个对象
const data = {};
const rows = document.querySelectorAll('.table-row');
for (var i = 0; i < rows.length; i++) {
  const row = rows[i];
  data.name = row.querySelector('.name-input').value;
  data.value = row.querySelector('.value-input').value;
  db.insert(data); // 每次插的都是同一个data，最后是最后一行的数据
}

修复方式：

在循环内部初始化数据对象，确保每次循环都创建新的对象：

const rows = document.querySelectorAll('.table-row');
for (var i = 0; i < rows.length; i++) {
  const row = rows[i];
  // 每次循环新建data对象
  const data = {
    name: row.querySelector('.name-input').value,
    value: row.querySelector('.value-input').value
  };
  db.insert(data);
}

3. 更高效的批量插入（推荐） #

如果你的数据库支持批量插入API，先把所有行的数据收集到数组里，再一次性插入——既避免循环中的变量问题，又提升性能：

const rows = document.querySelectorAll('.table-row');
// 把所有行数据转成数组
const dataList = Array.from(rows).map(row => ({
  name: row.querySelector('.name-input').value,
  value: row.querySelector('.value-input').value
}));
// 调用批量插入接口
db.batchInsert(dataList).then(() => console.log('所有数据插入完成'));

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