Блог

Главная - Вопросы по программированию - Событие щелчка для динамически созданной кнопки

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

#javascript #html #element #getelementbyid

#javascript #HTML #элемент #getelementbyid

Вопрос:

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

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

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

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

}

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

Моя попытка psuedo:

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

Комментарии:

1. «У меня есть функция, которая создает HTML-таблицу и в зависимости от содержимого массива заполняет ее X количеством строк. » Также опубликуйте эту функцию, иначе я предполагаю, в чем может заключаться ваша проблема, не находя, в чем проблема .

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

3. @zer00ne добавил его

Ответ №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']));

Комментарии:

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

Ответ №2:

Добавьте click обработчик на <table> . Затем вы можете проверить event.target , был ли щелчок вызван a <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]));

Комментарии:

1. Именно то решение, которое я собирался предложить 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>

Метки: