动态创建按钮的点击事件

Question

我有一个函数（在最底部看到）创建一个 HTML table 并且根据数组的内容，它将用 X 行填充它。每行有 2 个单元格，该位置的数组值和旁边的按钮。

我希望能够单击这些按钮并从 table 中删除特定行。

但是，我不能使用标准的点击事件：

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

}

因为它会抛出 ID 不存在的错误，并且因为我可能有 X 行，所以我需要某种 for 循环。

我的伪尝试是：

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

虽然我不太清楚该怎么做。

只有纯 JS 解决方案，没有 Jquery。

编辑：

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

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

Answer 2

在 <table> 上添加一个 click 处理程序。如果点击是由 <button> 触发的，那么您可以检查 event.target。如果是，向上移动 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]));

Answer 3

详细信息在来源中进行了评论。还有 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>

动态创建按钮的点击事件

Click event for dynamically created button

html

javascript

element

getelementbyid