Добавление функции щелчка к клеткам в динамически созданной таблице - JavaScript

var tableData = document.getElementsByTagName("td"); 

for(var i = 0; i < tableData.length; i++){ 
    var x = tableData[i]; 
    x.addEventListener("click", fun1(x.textContent)); 
} 
function fun1(y){ 
    document.getElementById("testB").textContent = y; 
}

Я пытаюсь добавить функцию щелчка к каждой ячейке в динамически созданной таблице (я не имею никакого способа знать, сколько клеток в таблице или что бы их идентификатор был, но мне нужен только текст, содержащийся в ячейке)Добавление функции щелчка к клеткам в динамически созданной таблице - JavaScript

Я хочу обновить кнопку с содержимым ячейки, и по состоянию на данный момент она не обновляется по клику и вместо этого обновляет кнопку до последнее значение таблицы.

Я довольно новичок в JavaScript и буду признателен за любую помощь, которую вы могли бы предложить.

вот решение я использовал благодаря ответу приведенного ниже

var tables = document.getElementsByTagName("table"); 
for(var i = 0; i < tables.length; i++){ 
    tables[i].addEventListener("click", 
    function(e) { 
     if(e.target && e.target.nodeName == "TD") { 
      fun1(e.target.textContent); 
     } 
    } 
); 
} 
function fun1(y){ 
    document.getElementById("testB").textContent = y; 
}

я пошел с этим решением, так как скрипт генерации таблиц не мой, и как таковой я не знаю какой идентификатор таблицы я хочу, и не знаю, сколько таблиц оно фактически создает.

источник

2016-02-02 Blake

Вы почти наверняка не хотите добавить обработчик событий индивидуально для каждой ячейки таблицы, если все (или даже много), они должны делать то же самое при нажатии.

Модель события DOM была разработана для поддержки delegation, что является гораздо лучшим решением в таких случаях. Вкратце: отдельные ячейки не реагируют на клики, но некоторый элемент предка, который считается постоянным приспособлением (скажем, <table>, в котором они находятся), обнаруживает щелчки на ячейках и соответствующим образом отвечает на них.

Вот как настроить делегирование:

document.getElementById("#mytable").addEventListener("click", 
    function(e) { 
     if(e.target && e.target.nodeName == "TD") { 
      fun1(e.target.textContent); 
     } 
    } 
);

Конечно, вы можете выбрать любой предок элемент, который вы хотите, даже <body>, если это то, что требуется. Также обратите внимание, что этот способ делать вещи означает, что ваш код ведет себя так, как ожидалось, даже когда ячейки добавляются или удаляются из таблицы - вы просто делаете это один раз при инициализации страницы.

источник

2016-02-02 20:28:46 Jon

Большое спасибо, этот ответ помог мне найти решение, которое работает для меня – Blake

x.addEventListener("click", fun1(x.textContent));

Эта линия ваша проблема - addEventListener ищет ссылки на функцию, вы просто вызов функции (которая не возвращает функцию). Оберните его анонимной функцией или привяжите значение к ссылке.

x.addEventListener("click", function() { 
    fun1(x.textContent) 
}, false); //also a good idea to add the event bubbling boolean param

В качестве альтернативы, ES6 стрелка Синтаксис:

x.addEventListener("click",() => fun1(x.textContent), false);

источник

2016-02-02 20:23:15

Добавление функции щелчка к клеткам в динамически созданной таблице - JavaScript

ответ

Смежные вопросы