在 JavaScript 中，如何在不使用 JQuery 的情况下使动态创建的 tablerow 可点击？

Question

我目前正在学校学习 JavaScript，我们还没有使用 JQuery，所以我不能在这个作业中使用它。我正在根据 JSON 数据在 JavaScript 中向表中动态添加行。但是，我需要使这些行可点击，然后调用一个函数。

这是我目前拥有的：

var table = document.getElementById("destinations");

for(var i=0; i < myJson.length; i++){
    var row = table.insertRow(i+1);

    row.insertCell(0).innerHTML = myJson[i]["name"];
    row.insertCell(1).innerHTML = myJson[i]["capital"];
    row.insertCell(2).innerHTML = myJson[i]["region"];
    row.insertCell(3).innerHTML = myJson[i]["surface"];
    row.insertCell(4).innerHTML = myJson[i]["population"];
}

我该怎么做呢？

Answer 1

我设法通过添加事件侦听器使行可单击：

row.addEventListener('click', function(){});

这样做时出现的一个问题是每个表行都会调用相同的函数。只有最后一个表行应该调用此函数。我通过在匿名函数中添加事件侦听器来修复此问题，所以现在我的代码如下所示：

var table = document.getElementById("destinations");

for(var i=0; i < myJson.length; i++){
    var row = table.insertRow(i+1);

    (function (i) {
        row.addEventListener('click', function(){});
    })(i);

    row.insertCell(0).innerHTML = myJson[i]["name"];
    row.insertCell(1).innerHTML = myJson[i]["name"];;
    row.insertCell(2).innerHTML = myJson[i]["region"];
    row.insertCell(3).innerHTML = myJson[i]["surface"];
    row.insertCell(4).innerHTML = myJson[i]["population"];
}