JavaScript 为动态生成的行添加以行号作为参数的 onclick 函数

Question

问题

你好，我正在制作一个 table，其中我有两个按钮，每行都有查看和更新。我在一个 for 循环中生成行。因为我使用的是 innerHTML，所以我没有在其中添加 onclick 侦听器，而是在第一个循环之后创建另一个 for 循环并在其中添加事件侦听器。事件监听器被添加到所有行。但是，所有行的函数中传递的参数（行号）是最后一行的编号。不确定为什么会这样，任何线索或建议都会有所帮助。下面我会留下相关代码和调试结果。

代码

添加新行

table.innerHTML="";
var count=1;
querySnapshot.forEach((doc) => {
  var innerhtml='<tr id="row">.....</tr>';

  //Append the new row
  table.innerHtML=table.innerHTML+innerhtml;

  //Assign new ID to row
  document.getElementById("row").id=count.toString()+"row";
  
  //Increment Count for next row/iteration
  count=count+i;


});

为每一行添加事件侦听器

for(var i=1;i<count;i++){
  console.log("Adding functions for row : "+i);

  //Get/Generate ID of rows (ID was assigned with same logic) 

  var cchkid=i.toString()+"chk";
  var uupdateid=i.toString()+"update";
  console.log("Adding functions for row : "+cchkid + " "+uupdateid);

  //Add Listeners for Each button in row i

  document.getElementById(cchkid).addEventListener("click", function(){
    alert("adding check function for id : "+i);
      check(i-1);
  });
  document.getElementById(uupdateid).addEventListener("click", function(){
    alert("adding update function for id : "+i);
      update(i-1);
  });
}

使用控制台日志和检查进行调试

计数：3

为第 1 行添加函数为行添加函数：1chk 1update 为行添加功能：2 为行添加函数：2chk 2update

检查使用检查元素，我可以确保所有行都有单独的 id

到目前为止一切看起来都很好，但是，当控制台登录到上述函数中时，所有行都为传递的参数提供相同的值。

单击两个不同行后的控制台日志 2 用户ID的显示数据：1

这应该是：

显示用户 ID 的数据：第一行 0
显示用户 ID 的数据：第二行 1，依此类推

我不知道这里出了什么问题，请帮助这个新手。谢谢！

Answer 1

答案很简单，但我花了一点时间才弄明白。在循环中分配事件监听器时，我使用 var 作为迭代器。即for(var i=0;i<length;i++)。但是在监听器内部，由于 JS 中 var 的范围，即使将监听器添加到循环内，var i 也不存在。

for(var i=0.......){
button.addeventlistener("click",function(){ myFunc(i); })); 
}

将此处的 var 更改为 let 就可以解决问题。就是这样。

JavaScript 为动态生成的行添加以行号作为参数的 onclick 函数

JavaScript Add onclick functions with row number as parameter to dynamically generated rows

html

javascript

dom

html-table

onclick