如何点击动态生成表格内的按钮为对应行添加删除标记并记录行ID

问题根因 #

• 动态元素事件绑定失效：$(document).ready执行时你还没调用CreateTableFromJSON生成表格，.trash_button类的按钮还不存在于DOM树中，直接绑定事件找不到对应元素，自然不会触发回调
• 表格行缺少ID属性：你生成<tr>标签时没有设置id属性，后续代码currentRow.id取值为空，调用document.getElementById会直接抛出错误，中断逻辑执行

修复步骤 #

1. 把直接绑定点击事件改为事件委托，绑定到页面加载时就存在的父元素上（比如document或者#showData容器）
2. 生成表格行时给<tr>添加对应ID，方便后续取值
3. 新增专用数组存储被标记行的ID，同时补充strikethrough样式实现删除线效果
4. 简化DOM操作逻辑，利用jQuery自带方法减少冗余代码

完整可运行代码 #

CSS（补充删除线样式） #

.strikethrough {
  text-decoration: line-through;
}

JS代码 #

// 用于存储被标记行ID的专用数组
var deletedAnimalIds = [];

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) {
     // 给tr加上id属性，值为animal_加动物ID
     tableBody += '<tr class="tr tr2" id="animal_'+d.animalId+'"><td class="td2">'+d.animalId
     +'</td><td class="td2">' +d.animalName
      +'</td><td class="td2">'+d.cageNum
      +'</td><td class="td2">'+d.legsNum
      // 修复标签写法，input为单标签不能嵌套img，改为用button包裹图标
      +'</td><td class="td2"><button class="trash_button"><img src="https://via.placeholder.com/24" width="24" height="24"></button></td></tr>';
  });

  var divContainer = document.getElementById("showData");
  divContainer.innerHTML = tableBody;
}

$(document).ready(function() {
  // 改为事件委托，所有动态生成的.trash_button点击事件都会触发
  $(document).on('click', ".trash_button", function() {
    var currentRow = $(this).closest("tr");
    // 切换删除线样式，无需手动写if判断增删类
    currentRow.toggleClass('strikethrough');
    // 提取当前行对应的动物ID
    var animalId = currentRow.attr('id').replace('animal_','');
    // 更新存储删除ID的专用数组
    if(currentRow.hasClass('strikethrough')) {
      // 标记为删除，加入数组前先去重
      if(!deletedAnimalIds.includes(animalId)) {
        deletedAnimalIds.push(animalId);
      }
    } else {
      // 取消标记，从数组中移除对应ID
      var index = deletedAnimalIds.indexOf(animalId);
      if(index > -1) {
        deletedAnimalIds.splice(index, 1);
      }
    }
    // 测试用可删除：打印当前已标记删除的ID数组
    console.log('已标记删除的ID：', deletedAnimalIds);
  });
});

HTML代码 #

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

内容的提问来源于stack exchange，提问作者Mike Hemilton