jQuery实现表格间选中行精准移动（非整表搬运）

本文全面解析如何基于复选框选中状态，将 HTML 表格中已勾选的 数据行精确迁移至另一张表格，杜绝整表结构误删风险，提供稳定可靠、可复用的 jQuery 表格行移动解决方案。

在实际项目开发中，双列表选择器（例如权限配置、字段映射等应用场景）几乎无处不在。用户勾选左侧表格中的条目，点击对应的操作按钮（如 >、>>、<、<<）即可将数据迁移至右侧，反之亦然。操作逻辑看似简单，但许多初版代码容易陷入一个常见误区：直接使用 $("#tblgroup1").remove() 配合 .append(html()) 来搬运数据行。这种写法存在严重隐患——它会直接摧毁整张表格的 DOM 结构，导致事件绑定失效、动态状态丢失、ID 重复冲突，甚至忽略选中状态直接整表搬运，最终造成业务逻辑彻底崩溃。

正确的做法应当仅操作被选中的 元素本身，而 jQuery 强大的链式定位能力恰好能够轻松胜任这一需求。

✅ 正确实现逻辑（以“右移选中项”为例）

function Swapselections(btn) {
  const $btn = $(btn);
  const text = $btn.text().trim();
  if (text === '>>') {
    // 将 tblgroup1 中所有已勾选行移动到 tblgroup2
    const $selectedRows = $('#tblgroup1 input:checked').closest('tr');
    $('#tblgroup2').append($selectedRows);
  } else if (text === '>') {
    // 单向右移：仅移动当前选中行（同上，语义更明确）
    $('#tblgroup1 input:checked').closest('tr').appendTo('#tblgroup2');
  } else if (text === '<') {
    // 单向左移
    $('#tblgroup2 input:checked').closest('tr').appendTo('#tblgroup1');
  } else if (text === '<<') {
    // 全量左移：tblgroup2 所有行移回 tblgroup1
    $('#tblgroup2 tr').appendTo('#tblgroup1');
  }
}