Klicken Sie auf Ereignis für dynamisch erstellte Schaltfläche

Question

Ich habe eine Funktion (ganz unten), die eine HTML-Tabelle erstellt und je nach Inhalt eines Arrays wird es mit X Anzahl der Zeilen gefüllt. Jede Zeile hat 2 Zellen, den Wert des Arrays in dieser Position und eine Schaltfläche daneben.

Ich möchte klicken Sie auf diese Schaltflächen und löschen Sie die bestimmte Zeile aus der Tabelle.

Allerdings kann ich nicht einen Standard für die Click-Ereignis verwenden:

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

} 

Weil es einen Fehler werfen, dass die ID nicht existiert und weil ich potentiell X Anzahl der Zeilen habe, werde ich eine Art brauchen von für Schleife.

Mein psuedo Versuch ist:

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

Ich kann nicht ganz Vision, wie es aber zu tun.

Nur reine JS-Lösungen bitte auch, keine 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; 
} 

Answer 1

Ereignis hinzufügen, wenn Sie Elemente erstellen mit addEventListener():

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

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

Hoffnung, das hilft.

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']));

Answer 2

einen click Handler auf dem <table> hinzufügen. Sie können dann die event.target überprüfen, wenn der Klick durch eine <button> ausgelöst wurde. Wenn ja, reisen Sie das DOM hinauf, bis Sie das umgebende <tr> Element erreichen und rufen Sie .remove() darauf an.

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]));

Answer 3

Die Details werden in der Quelle kommentiert. Es gibt auch eine 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>