В JavaScript, как сделать динамически создаваемую табличку интерактивной без использования JQuery? - PullRequest
Новая
       32

В JavaScript, как сделать динамически создаваемую табличку интерактивной без использования JQuery?

0 голосов
/ 15 июня 2019

В настоящее время я изучаю JavaScript в школе, и мы еще не используем JQuery, поэтому я не могу использовать это для этого задания. Я динамически добавляю строки в таблицу на JavaScript, основываясь на данных JSON. Однако мне нужно сделать эти строки кликабельными, чтобы затем вызвать функцию.

Это то, что у меня сейчас есть: 

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

Как бы я поступил так?

1 Ответ

1 голос
/ 15 июня 2019

Мне удалось сделать строки кликабельными, добавив прослушиватель событий: 

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