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

Question

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

这是我目前拥有的：

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"];
}

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

In JavaScript how do I make a dynamically created tablerow clickable without using JQuery?

javascript

onclick

tablerow