实现表格行双向复制：Table1与Table2间单/全选行反向复制需求

没问题，咱们来搞定这个反向复制的需求！已经有了Table1到Table2的正向逻辑，反向其实思路差不多，只是把源和目标表格换一下，我给你一步步拆解：

1. 先补全Table2的HTML结构 #

首先得确保Table2的表头和行结构和Table1对应，特别是要加上和Table1一致的复选框：

<!-- Table2的完整结构示例 -->
<table class="table table-striped table-bordered" id="table2">
  <thead>
    <tr>
      <!-- 全选复选框，给个唯一ID方便绑定事件 -->
      <th><input type="checkbox" id="copy-all-table2"> Copy All to Table1</th>
      <!-- 下面的表头和Table1保持一致 -->
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里是从Table1复制过来的行，每行要包含class为copy-one的复选框 -->
  </tbody>
</table>

注意：从Table1复制过来的行，要确保每行的第一个单元格里的复选框class是copy-one，这样和咱们的事件逻辑对应上。

2. 编写反向复制的JavaScript逻辑 #

咱们分单行复制和全选复制两个部分来写，用原生JS就行，不用额外依赖：

单行复制（点击Table2行内的copy-one复选框） #

// 给Table2绑定事件委托，监听copy-one复选框的变化
document.getElementById('table2').addEventListener('change', function(e) {
  // 判断触发事件的是单行复选框
  if (e.target.classList.contains('copy-one')) {
    const currentRow = e.target.closest('tr');
    // 当复选框被选中时执行复制
    if (e.target.checked) {
      // 克隆当前行（深克隆，包含所有子元素）
      const clonedRow = currentRow.cloneNode(true);
      // 重置克隆行的复选框状态，避免复制过来就是选中的
      clonedRow.querySelector('.copy-one').checked = false;
      // 把克隆行添加到Table1的tbody里
      document.getElementById('table1').querySelector('tbody').appendChild(clonedRow);
      
      // 如果你想要的是"移动"而不是"复制"，取消下面这行注释，复制后移除Table2里的该行
      // currentRow.remove();
    }
  }
});

全选复制（点击Table2表头的copy-all复选框） #

// 给Table2的全选复选框绑定事件
document.getElementById('copy-all-table2').addEventListener('change', function(e) {
  const table2Tbody = document.getElementById('table2').querySelector('tbody');
  const table1Tbody = document.getElementById('table1').querySelector('tbody');
  const allTable2Rows = table2Tbody.querySelectorAll('tr');
  
  // 全选框选中时，复制所有行到Table1
  if (e.target.checked) {
    allTable2Rows.forEach(row => {
      // 先把单行复选框设为选中状态，和全选保持同步
      row.querySelector('.copy-one').checked = true;
      // 克隆行并重置复选框
      const clonedRow = row.cloneNode(true);
      clonedRow.querySelector('.copy-one').checked = false;
      table1Tbody.appendChild(clonedRow);
      
      // 同样，如果要移动而不是复制，取消下面注释
      // row.remove();
    });
  } else {
    // 全选框取消时，把所有单行复选框也取消选中
    allTable2Rows.forEach(row => {
      row.querySelector('.copy-one').checked = false;
    });
  }
});

3. 额外注意事项 #

• 去重需求：如果不希望Table1里出现重复的行，可以在复制前加个判断，比如根据行里的唯一标识（比如某列的ID值）检查Table1里是否已经存在，再决定是否复制。
• 样式同步：因为用了Bootstrap的表格类，克隆的行样式会自动继承，不用额外处理。
• 事件委托的优势：用事件委托而不是给每个复选框单独绑定事件，这样即使后续动态添加到Table2的行，也能触发复制逻辑，完美适配之前的正向复制功能。

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