循环表格行执行jQuery Ajax时row变量无法访问的问题排查

问题原因 #

你用var声明了循环变量i和row，var属于函数级作用域，整个循环过程中只有同一个row变量在被复用。而AJAX请求是异步执行的，当回调函数触发时，循环已经全部跑完，row早已指向循环的最后一行（甚至可能变为undefined），自然无法访问到当前循环对应的那一行数据。

另外还有一个小错误：代码里的textcontent是大小写错误，JavaScript属性名区分大小写，应该写成textContent，否则赋值操作不会生效。

解决方案 #

方案1：改用let声明循环变量 #

let是块级作用域，每次循环都会创建一个新的row变量，AJAX的回调函数会捕获到当前循环对应的那个row：

var table = document.getElementById("tab");
// 将var替换为let，让row成为块级作用域变量
for (let i = 0, row; row = table.rows[i]; i++) {
   let idd = row.cells[1].textContent;
   
   if(idd != 'Id' && idd != '') {
       $.ajax({
            type: "POST",
            url: "/numordiniperiodoagenti",
            data: {id : idd, start: sstart, end: eend},
            success: function(response){
                // 修正大小写：textContent
                row.cells[10].textContent = response;
            }
        });
    }
}

方案2：用forEach遍历表格行 #

直接遍历表格的行数组，避免循环变量的作用域问题：

var table = document.getElementById("tab");
// 将rows转换为数组后使用forEach遍历
Array.from(table.rows).forEach(row => {
   let idd = row.cells[1].textContent;
   
   if(idd != 'Id' && idd != '') {
       $.ajax({
            type: "POST",
            url: "/numordiniperiodoagenti",
            data: {id : idd, start: sstart, end: eend},
            success: function(response){
                row.cells[10].textContent = response;
            }
        });
    }
});

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