Событие клика для динамически созданной кнопки

У меня есть функция (видимая в самом низу), которая создает таблицу HTML и в зависимости от содержимого массива заполняет ее количеством строк. каждая строка имеет 2 ячейки, значение массива в этом положении и кнопку рядом с ней.Событие клика для динамически созданной кнопки

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

Однако, я не могу использовать стандарт на событие Click:

function unMatchButtonClicked(){ 
    var button = document.getElementById('unmatch').onclick; 

}

Потому что он выдаст ошибку, что идентификатор не существует и потому, что у меня есть потенциально X количество строк, мне нужно какое-то для цикла.

Моя псевдо попытка:

for (var i=0; i < table.length; i++){ 
    var button = document.getElementById('unmatch') 
    if (button.clicked){ 
    remove row} 
}

Я не совсем видение, как это сделать, хотя.

Только чистые решения JS, а также, пожалуйста, не JQuery.

EDIT:

function makeHTMLMatchesTable(array){ 
    var table = document.createElement('table'); 
    for (var i = 0; i < array.length; i++) { 
     var row = document.createElement('tr'); 
     var cell = document.createElement('td'); 
     cell.textContent = array[i]; 
     row.appendChild(cell); 
    cell = document.createElement('td'); 
     var button = document.createElement('button'); 
     button.setAttribute("id", "unMatchButton" +i); 
     cell.appendChild(button); 
     row.appendChild(cell); 
     table.appendChild(row); 
    } 
    return table; 
}

источник

2016-10-14 The worm

«У меня есть функция, которая создает таблицу HTML и в зависимости от содержимого массива будет заселить его с X количеством строк.» Пост, которые функционируют так же, иначе я m догадываясь о том, что ваша проблема * может быть * не найти, что проблема * *. – zer00ne

Если у вас несколько кнопок, вы не можете использовать id, вы должны использовать класс или атрибут, id - уникальный идентификатор. В любом случае, как @ zer00ne сказал, что вы должны опубликовать свою фактическую функцию, или мы не можем понять. –

@ zer00ne добавил –

Добавить событие при создании элементов с использованием addEventListener():

... 
var button = document.createElement('button'); 
button.setAttribute("id", "unMatchButton" +i); 

button.addEventListener("click", clickEventFunction, false); 
...

Надеется, что это помогает.

function makeHTMLMatchesTable(array) { 
 
    var table = document.createElement('table'); 
 
    table.setAttribute("border", 1); 
 

 
    for (var i = 0; i < array.length; i++) { 
 
    var row = document.createElement('tr'); 
 
    var cell = document.createElement('td'); 
 
    cell.textContent = array[i]; 
 
    row.appendChild(cell); 
 
    cell = document.createElement('td'); 
 
    
 
    var button = document.createElement('button'); 
 
    button.setAttribute("id", "unMatchButton" + i); 
 
    button.textContent = "Delete"; 
 

 
    //click Event 
 
    button.addEventListener("click", delete_row, false); 
 
    
 
    cell.appendChild(button); 
 
    row.appendChild(cell); 
 
    table.appendChild(row); 
 
    } 
 

 
    return table; 
 
} 
 

 
function delete_row() { 
 
    this.parentNode.parentNode.remove(); 
 
} 
 

 
document.body.appendChild(makeHTMLMatchesTable(['Cell 1','Cell 2','Cell 3','Cell 4']));

источник

2016-10-14 09:53:37

Это потрясающе, спасибо большое. (большой ответ, потому что он менял мой код минимально) –

Добавить click обработчик на <table>. Затем вы можете проверить event.target, если щелчок был вызван <button>. Если да, пройдите вверх по DOM, пока не дойдете до окружающего элемента <tr> и позвоните по телефону .remove().

function makeHTMLMatchesTable(array) { 
 
    var table = document.createElement('table'); 
 

 
    for (var i = 0; i < array.length; i++) { 
 
    var row = document.createElement('tr'); 
 
    var cell = document.createElement('td'); 
 
    cell.textContent = array[i]; 
 
    row.appendChild(cell); 
 
    cell = document.createElement('td'); 
 
    var button = document.createElement('button'); 
 
    button.setAttribute("id", "unMatchButton" + i); 
 
    button.textContent = "Remove"; 
 
    cell.appendChild(button); 
 
    row.appendChild(cell); 
 
    table.appendChild(row); 
 
    } 
 

 
    table.addEventListener("click", removeRow, false); 
 

 
    return table; 
 
} 
 

 
function removeRow(evt) { 
 
    if (evt.target.nodeName.toLowerCase() === "button") { 
 
    evt.target.parentNode.parentNode.remove(); // .parentNode.parentNode == <tr> 
 
    } 
 
} 
 

 
document.body.appendChild(makeHTMLMatchesTable([1, 2, 3, 4]));

источник

2016-10-14 09:53:44 Andreas

Точно решение, которое я собирался предложить +1 – Shaggy

Детали прокомментированы в источнике. Также есть PLUNKER.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    table, 
 
    td { 
 
     border: 1px solid red; 
 
    } 
 
    button { 
 
     height: 24px; 
 
     width: 24px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <script> 
 
    var array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
 

 
    function makeHTMLMatchesTable(array) { 
 
     var table = document.createElement('table'); 
 
     for (var i = 0; i < array.length; i++) { 
 
     var row = document.createElement('tr'); 
 
     var cell = document.createElement('td'); 
 
     cell.textContent = array[i]; 
 
     row.appendChild(cell); 
 
     cell = document.createElement('td'); 
 
     var button = document.createElement('button'); 
 
     button.setAttribute("id", "unMatchButton" + i); 
 
     cell.appendChild(button); 
 
     row.appendChild(cell); 
 
     table.appendChild(row); 
 
     } 
 
     // This is added to comlete this function 
 
     return document.body.appendChild(table); 
 
    } 
 

 
    makeHTMLMatchesTable(array1); 
 

 
    // Reference table 
 
    var table = document.querySelector('table'); 
 

 
    /* 
 
    | - Add an eventListener for ckick events to the table 
 
    | - if event.target (element clicked; i.e. button) 
 
    | is NOT the event.currentTarget (element that 
 
    | is listening for the click; i.e. table)... 
 
    | - ...then assign a variable to event.target's 
 
    | id (i.e. #unMatchButton+i) 
 
    | - Next extract the last char from the id (i.e. from 
 
    | #unMatchButton+i, get the 'i') 
 
    | - Then convert it into a real number. 
 
    | - Determine the row to which the button (i.e. event 
 
    | .target) belongs to by using the old rows method. 
 
    | - while row still has children elements... 
 
    | - ...remove the first child. Repeat until there are 
 
    | no longer any children. 
 
    | - if the parent of row exists (i.e. table which it 
 
    | does of course)... 
 
    | - ...then remove row from it's parents 
 
    */ 
 
    table.addEventListener('click', function(event) { 
 
     if (event.target !== event.currentTarget) { 
 
     var clicked = event.target.id; 
 
     var i = clicked.substr(-1); 
 
     var idx = Number(i); 
 
     var row = this.rows[idx]; 
 
     while (row.children > 0) { 
 
      row.removeChild(row.firstChild); 
 
     } 
 
     if (row.parentNode) { 
 
      row.parentNode.removeChild(row); 
 
     } 
 
     return false 
 
     } 
 
    }, false); 
 
    </script> 
 
</body> 
 

 

 
</html>

источник

2016-10-14 12:31:47 zer00ne

Событие клика для динамически созданной кнопки

ответ

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