jQuery表格间选中行精准移动与交换方法

本文详细讲解如何利用复选框选中表格行，将 HTML 表格中已勾选的行（tr）安全、高效地迁移到另一张表格中，避免整表移除导致的 DOM 结构丢失与事件失效问题。

在实际项目开发中，双列表选择器是一种极为常见的交互组件，广泛应用于权限分配、字段映射、角色绑定等场景。用户只需勾选左侧或右侧表格中的条目，点击“>”、“>>”、“<”、“<<”按钮，即可实现单向或批量移动。如果直接使用 $("#tblgroup1").remove()，则容易踩坑：整个表格会被销毁，不仅未选中的行全部消失，绑定的事件、表单状态和 DOM 引用也会一并清空，造成不可逆的数据丢失。

正确的做法是精准定位并迁移选中的行，而非整表移除。jQuery 的链式操作在此场景下非常高效：先找到带勾选复选框的 ，再将其从原容器“剪切”下来，追加到目标表格中。该操作本质上是 DOM 节点的重挂载（reparenting），不会触发克隆或序列化，原始元素的所有属性、事件绑定以及内部状态（如复选框的 checked 状态）均原封不动保留。

下面是一段经过优化的核心逻辑，可适配全部四个按钮：

function Swapselections(btn) {  
  const $btn = $(btn);  
  const text = $btn.text().trim();  
  // 统一获取当前选中行：查找包含 checked input 的 tr  
  const getCheckedRows = (tableId) => $(`${tableId} input:checked`).closest('tr');  

  if (text === '>>') {  
    // 将 tblgroup1 中所有选中行移至 tblgroup2  
    const $rows = getCheckedRows('#tblgroup1');  
    $('#tblgroup2').append($rows);  
  } else if (text === '>') {  
    // 将 tblgroup1 中首个选中行移至 tblgroup2（单条移动）  
    const $row = getCheckedRows('#tblgroup1').first();  
    if ($row.length) $('#tblgroup2').append($row);  
  } else if (text === '<') {  
    // 将 tblgroup2 中首个选中行移至 tblgroup1（单条移动）  
    const $row = getCheckedRows('#tblgroup2').first();  
    if ($row.length) $('#tblgroup1').append($row);  
  } else if (text === '<<') {  
    // 将 tblgroup2 中所有选中行移至 tblgroup1  
    const $rows = getCheckedRows('#tblgroup2');  
    $('#tblgroup1').append($rows);  
  }  
}

✅ 关键优势说明：

• ✅ 零数据丢失：仅移动 节点，未选中的行稳稳留在原地；
• ✅ 状态完整保留：复选框的 checked 状态、自定义 data 属性、内联事件，一个都不少；
• ✅ 性能友好：无需 .html() 序列化再重新解析，既避免 XSS 风险，也防止格式错乱；
• ✅ 语义清晰：closest('tr') 向上精准查找最近的行容器，即使表格内嵌套了其他结构也能正确匹配。

⚠️ 注意事项：

• 所有 的 id 属性在页面中必须唯一。示例代码中多个 id="vehicle1" 其实违反 HTML 规范，建议改为 class="item-checkbox" 或动态生成唯一 ID；
• 如果希望移动后自动取消勾选，可在 append() 之后追加一行 $rows.find('input[type="checkbox"]').prop('checked', false)；
• 若表格带有 ，务必确保只操作 内的 ，避免误移标题行。可限定选择器为 #tblgroup1 tbody input:checked；
• 建议给按钮加上 disabled 状态反馈——例如没有选中项时禁用按钮，可显著提升用户体验。

采用这套方案，可以构建出健壮、可维护的双向列表交互组件，既兼顾功能完整，又保证 DOM 操作的安全性，值得在项目中直接复用。