动态创建按钮的点击事件答案

【问题标题】：Click event for dynamically created button动态创建按钮的点击事件
【发布时间】：2016-10-14 09:34:24
【问题描述】：

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

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

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

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

【问题讨论】：

“我有一个创建 HTML 表的函数，根据数组的内容，它将用 X 行填充它。”也发布该函数，否则我猜您的问题可能是什么没有找到问题是什么。
如果你有多个按钮你不能使用id，你应该使用class或attribute，id是一个唯一的标识符。无论如何，正如@zer00ne 所说，您必须发布您的实际功能，否则我们无法理解。
@zer00ne 添加了它

标签： javascript html element getelementbyid

【解决方案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']));

【讨论】：

这太棒了，非常感谢。（很好的答案，因为它最小地改变了我的代码）

【解决方案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]));

【讨论】：

正是我要提出的解决方案+1

【解决方案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>

【讨论】：