如何通過在表格中動態生成的按鈕上的“onclick”刪除表格中的一行？

Question

我做了一個動態生成的表。 我必須在每一行的最后一列中有一個按鈕，只要我點擊它就會發生兩件事：

1. 整行將標有<strike>

2. 該行的 ID 將 go 放入一個特殊的數組中。

The last td in each row is a button from a class called trash_button to which a jQuery function is linked that should cause each button from that class to add to its row a section called strikethrough

問題是我試圖制作的按鈕不起作用。 盡管 function 鏈接到他們的 class，但從我所做的測試來看，事實證明按下按鈕甚至不會調用 function。

我真的不明白這里有什么問題。

 function CreateTableFromJSON() { var animals = [{ "animalId": "1", "animalName": "elephent", "cageNum": "231", "legsNum": "4" }, { "animalId": "2", "animalName": "tiger", "cageNum": "324", "legsNum": "56.00" }, { "animalId": "3", "animalName": "wolf", "cageNum": "414", "legsNum": "210.40" } ] var tableBody = '<table id="table"><tr class="tr tr1"><td class="td1">animal Id</td><td class="td1">animal name</td><td class="td1">cage Number</td><td class="td1">legs Number</td><td class="td1">delete</td></tr>'; animals.forEach(function(d) { tableBody += '<tr class="tr tr2"><td class="td2">'+d.animalId +'</td><td class="td2">' +d.animalName +'</td><td class="td2">'+d.cageNum +'</td><td class="td2">'+d.legsNum +'</td><td class="td2"><input type="button" class="trash_button"><img src="https://via.placeholder.com/24" width="100%" height="100%"></input></td></tr>'; }); var divContainer = document.getElementById("showData"); divContainer.innerHTML = tableBody; } $(document).ready(function() { $(".trash_button").on('click', function() { var currentRow = $(this).closest("tr"); if (document.getElementById(currentRow.id).classList.contains('strikethrough')) { document.getElementById(currentRow.id).classList.remove('strikethrough'); } else { document.getElementById(currentRow.id).classList.add('strikethrough'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="CreateTableFromJSON()" value="Create Table From JSON">animal table</button> <div id="showData">(Div added by community)</div>

Answer 1

如果您要動態添加標記，則需要使用事件委托來捕捉按鈕在 DOM 中冒泡時的點擊。 您還應該堅持使用 jQuery 或 vanilla JS。 此示例使用香草 JS。

 function createTable(div, data) { let tableBody = '<table id="table"><tr class="tr tr1"><td class="td1">animal Id</td><td class="td1">animal name</td><td class="td1">cage Number</td><td class="td1">legs Number</td><td class="td1"></td></tr>'; const deleteBtn = "https://dummyimage.com/80x20/FFA07A/000&text=Delete"; animals.forEach(function(d) { tableBody += ` <tr class="tr tr2"> <td class="td2">${d.animalId}</td> <td class="td2">${d.animalName}</td> <td class="td2">${d.cageNum}</td> <td class="td2">${d.legsNum}</td> <td class="td2 delete"> <img class="trash_button" src="${deleteBtn}" /> </td> </tr> `; }); showData.innerHTML = tableBody; } const animals = [{ "animalId": "1", "animalName": "elephent", "cageNum": "231", "legsNum": "4" }, { "animalId": "2", "animalName": "tiger", "cageNum": "324", "legsNum": "56.00" }, { "animalId": "3", "animalName": "wolf", "cageNum": "414", "legsNum": "210.40" } ]; const button = document.querySelector('.createTable'); const showData = document.querySelector('.showData'); button.addEventListener('click', () => createTable(showData, animals)); showData.addEventListener('click', handleClick); function handleClick(e) { if (e.target.matches('.trash_button')) { e.target.closest('tr').classList.toggle('strikethrough'); } }

 table { margin-top: 2em; width: 100%; border-collapse: collapse; } td { padding: 0.3em; border: 1px solid #dfdfdf; }.tr1 { font-size: 0.8em; background-color: #efefef; text-transform: uppercase; }.strikethrough { text-decoration: line-through; }.createTable:hover, .delete:hover { cursor: pointer; }

 <button class="createTable">Animal table</button> <table class="showData"></table>

Answer 2

我會使用 id 和 data 屬性來專門針對每個元素：

animals.forEach( function(animal) {
  //I've shortened for brevity, note I'm also using backticks to use js literal syntax
  tableBody += `<tr class="tr" id="animal-${animal.animalId}">
                  <td>${animal.animalName}</td>
                  <td><button class="trash_button" data-id="${animal.animalId}">Delete</button>
                </tr>`
});


......

$(document).ready(function() {
  $('.trash_button').on('click', function(button) {
    let id = button.data.id;
    $(`#animal-${id}`).toggleClass('strikethrough');
  });
});