点击相邻单列表格单元格删除多列表格对应行的代码疑问

嘿，这个坑我之前也踩过！你说的完全对，closest()方法确实搞不定这个场景——它只能在当前元素的父级DOM树里向上查找，而你的两个表格是完全独立的DOM节点，根本不在同一棵子树里，所以原代码不仅找不到目标行，甚至连事件绑定都可能没生效（因为你把事件委托给了.my-table，但.del-row-td根本不在这个表格里啊！）

核心思路 #

既然两个表格的行是位置一一对应的（单列表格的第n个单元格对应多列表格的第n行），我们可以通过行索引来关联两者：

• 点击单列表格的删除单元格时，获取它所在行的索引
• 用这个索引去多列表格里找到对应的行，然后删除

修正后的代码 #

首先给你的单列表格加个专属类（比如.delete-trigger-table），方便我们绑定事件：

HTML结构示例

<!-- 单列表格（删除触发器） -->
<table class="delete-trigger-table">
  <tr><td class="del-row-td">删除第1行</td></tr>
  <tr><td class="del-row-td">删除第2行</td></tr>
  <tr><td class="del-row-td">删除第3行</td></tr>
</table>

<!-- 多列表格（目标表格） -->
<table class="my-table">
  <tr><td>数据1-1</td><td>数据1-2</td></tr>
  <tr><td>数据2-1</td><td>数据2-2</td></tr>
  <tr><td>数据3-1</td><td>数据3-2</td></tr>
</table>

JavaScript代码

// 把事件委托给单列表格（或者document，后者兼容性更好）
$('.delete-trigger-table').on('click', '.del-row-td', function(e) {
  e.preventDefault();
  
  // 获取当前点击单元格所在行的索引（从0开始计数）
  const targetRowIndex = $(this).closest('tr').index();
  
  // 找到多列表格中对应索引的行并删除
  // 如果多列表格有<thead>表头，记得改成$('.my-table tbody tr')
  $('.my-table tr').eq(targetRowIndex).remove();
});

关键细节说明 #

• 事件委托的正确对象：原代码把事件绑定给了.my-table，但.del-row-td不在这个表格里，所以事件永远不会触发。我们要把委托对象改成包含.del-row-td的单列表格，或者全局的document。
• 索引的准确性：如果多列表格有表头行（放在<thead>里），那数据行的索引要从<tbody>里找，不然会误删表头。
• 替代方案（如果行不是按位置对应）：如果两个表格的行是通过ID/自定义属性关联的（比如单列表格的行有data-row-id="1"，多列表格的行也有data-row-id="1"），那可以用属性匹配的方式删除：

  const rowId = $(this).closest('tr').data('row-id');
  $('.my-table tr[data-row-id="' + rowId + '"]').remove();
  

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