如何通过在表格中动态生成的按钮上的“onclick”删除表格中的一行？

Posted 2023-05-08

【中文标题】如何通过在表格中动态生成的按钮上的“onclick”删除表格中的一行？

【英文标题】：How can I delete a row in a table by 'onclick' on a button that is dynamically generated within the table?

【发布时间】：2021-11-30 06:35:22

【问题描述】：

我制作了一个动态生成的表格。 我必须在每一行的最后一列有一个按钮，只要我点击它就会发生两件事：

整行将标有<strike>

行的 ID 将进入一个特殊的数组。

每行中的最后一个 td 是来自名为 trash_button 的类中的一个按钮，一个 jQuery 函数链接到该按钮应该导致该类中的每个按钮在其行中添加一个名为 strikethrough 的部分

问题是我尝试制作的按钮不起作用。 即使该函数与他们的类相关联，但从我所做的测试来看，事实证明按下按钮甚至不会调用该函数。

我真的不明白这里出了什么问题。

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"  ></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>

【问题讨论】：

欢迎。请参阅How to Ask 并拨打tour。 ID为showData的元素在哪里？

我已将容器元素添加到 sn-p。请进一步修改以证明问题。

【参考方案1】：

如果您要动态添加标记，则需要使用 event delegation 来捕捉按钮在 DOM 中冒泡时的点击。您还应该坚持使用 jQuery 或 vanilla JS。

function CreateTableFromJSON() 

  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"
    
  ]

  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">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"><img class="trash_button" src="https://dummyimage.com/80x20/b87d7d/000&text=Delete" /></td></tr>';
  );

  $('#showData').html(tableBody);



$(document).ready(function() 
  $(document).on('click', '.trash_button', function() 
    $(this).closest('tr').toggleClass('strikethrough');
  );
);

.strikethrough  text-decoration: line-through; 

<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>
<table id="showData"></table>

【参考方案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');
  );
);