如何用原生JavaScript实现HTML表格行的跨表移动与删除？

当然可以用原生JavaScript搞定这个需求！之前拼接标签ID没成功大概率是因为动态元素的事件绑定问题，或者ID命名冲突导致的。我给你整理了一套完整的实现方案，包含HTML结构和JavaScript逻辑，你可以直接参考：

完整代码示例 #

HTML部分 #

<!-- 源表格 -->
<table id="table_id" class="table_styles">
  <tr>
    <td class="grid-item-header">表头1</td>
    <td class="grid-item-header">表头2</td>
    <td class="grid-item-header">操作</td>
  </tr>
</table>

<!-- 追加行按钮 -->
<button id="add_row_btn">添加新行</button>

<!-- 目标表格 -->
<table id="table_id_three" class="table_styles">
  <tr>
    <td class="grid-item-header">表头1</td>
    <td class="grid-item-header">表头2</td>
    <td class="grid-item-header">操作</td>
  </tr>
</table>

JavaScript部分 #

// 获取DOM元素
const sourceTable = document.getElementById('table_id');
const targetTable = document.getElementById('table_id_three');
const addRowBtn = document.getElementById('add_row_btn');

// 给追加行按钮绑定点击事件
addRowBtn.addEventListener('click', function() {
  // 创建新行
  const newRow = document.createElement('tr');
  
  // 模拟行数据（你可以替换成实际的业务数据）
  const data1 = `数据${sourceTable.rows.length}`;
  const data2 = `内容${sourceTable.rows.length}`;
  
  // 构建行内单元格和转移按钮
  newRow.innerHTML = `
    <td>${data1}</td>
    <td>${data2}</td>
    <td><button class="transfer-btn">转移到下方表格</button></td>
  `;
  
  // 把新行添加到源表格
  sourceTable.appendChild(newRow);
  
  // 给新行的转移按钮绑定点击事件
  bindTransferEvent(newRow.querySelector('.transfer-btn'));
});

// 绑定转移按钮的点击事件逻辑
function bindTransferEvent(btn) {
  btn.addEventListener('click', function(e) {
    // 获取当前按钮所在的行
    const currentRow = e.target.closest('tr');
    
    // 克隆当前行（注意：cloneNode(true)会克隆所有子元素和事件）
    const clonedRow = currentRow.cloneNode(true);
    
    // 修改克隆行的按钮文本（可选，根据需求调整）
    clonedRow.querySelector('.transfer-btn').textContent = "已转移";
    clonedRow.querySelector('.transfer-btn').disabled = true;
    
    // 把克隆行添加到目标表格
    targetTable.appendChild(clonedRow);
    
    // 删除源表格中的原行
    currentRow.remove();
  });
}

关键逻辑解释 #

1. 避免拼接ID的问题：我没有用拼接ID的方式传递参数，而是通过e.target.closest('tr')直接获取按钮所在的行，这种方式更可靠，不会因为ID重复或者命名错误出问题。
2. 动态元素事件绑定：因为追加的行是动态创建的，所以在每次创建新行后，需要单独给里面的转移按钮绑定事件（或者也可以用事件委托的方式，监听父表格的点击事件，判断点击的是转移按钮）。
3. 行克隆与删除：使用cloneNode(true)克隆整行内容，然后添加到目标表格，最后用remove()删除原行，实现数据转移的效果。

如果你需要自定义行数据或者样式，只需要修改innerHTML里的内容，或者调整克隆后的行处理逻辑即可。

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