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

【问题标题】：In JavaScript how do I make a dynamically created tablerow clickable without using JQuery?在 JavaScript 中，如何在不使用 JQuery 的情况下使动态创建的 tablerow 可点击？
【发布时间】：2019-10-29 13:36:11
【问题描述】：

我目前在学校学习 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"];
}

我该怎么做呢？

【问题讨论】：

基本方式是row.addEventListener('click', evt => { ... })。高级方法是在整个表中添加一个侦听器，而不是在单个行上，然后检查evt.target 以查看点击的来源。
@Amadan 这种方法似乎可行（做了基本的方法）。我现在遇到的问题是每一行都将使用只有最后一行应该使用的功能。即使我给了它们单独的功能，它们都得到相同的 onclick 事件。
你可能在做this。它使用 jQuery，但基本上$(foo).click(func) 的工作与foo.addEventListener('click', func) 几乎相同。阅读那篇文章，以及关闭它的副本。
现在一切正常，谢谢！
您可能想发布问题的答案，因为您知道如何回答它。 :)

标签： javascript onclick tablerow

【解决方案1】：

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

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

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

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

【讨论】：