如何使用 jQuery 实现表格间选中行的双向迁移

本文详解如何基于复选框选择，精准迁移 HTML 表格中的选中行（<tr>）到另一张表格，避免整表替换导致的结构丢失与事件失效问题，并提供健壮、可复用的 jQuery 实现方案。

本文详解如何基于复选框选择，精准迁移 html 表格中的选中行（`

在实际开发中，常需实现“左右穿梭框”式的数据分组管理，例如权限分配、字段映射或选项归类。用户勾选左侧表格中的若干行后，点击 >> 按钮将其整体移入右侧表格；反之亦然。但若直接操作 html() + remove()（如原代码所示），会导致整个 <table> 被销毁并重建，不仅丢失已绑定的事件监听器、动态状态（如 checked 属性同步问题），还可能破坏 DOM 结构完整性（如 <tbody> 缺失）。

正确的做法是：只移动被选中的 <tr> 元素本身，而非其父容器。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 === '>') {
    // 单向迁移：仅迁移第一个选中项（可按需扩展逻辑）
    const $firstSelected = $('#tblgroup1 input:checked').first().closest('tr');
    if ($firstSelected.length) {
      $('#tblgroup2').append($firstSelected);
    }
  } else if (text === '<') {
    // 单向迁移：从 tblgroup2 移回 tblgroup1 的第一个选中项
    const $firstSelected = $('#tblgroup2 input:checked').first().closest('tr');
    if ($firstSelected.length) {
      $('#tblgroup1').append($firstSelected);
    }
  } else if (text === '<<') {
    // 全量迁移：将 tblgroup2 所有已勾选行移回 tblgroup1
    const $selectedRows = $('#tblgroup2 input:checked').closest('tr');
    $('#tblgroup1').append($selectedRows);
  }
}

✅ 关键原理说明：

• $(‘input:checked’) 精准定位所有处于勾选状态的复选框；
• .closest(‘tr’) 向上查找最近的 <tr> 父元素，确保整行（含 checkbox 及 label）被完整迁移；
• .append() 直接移动 DOM 节点（非克隆），原位置自动移除，无需手动 remove()，语义清晰且性能更优。

⚠️ 注意事项：

• ID 唯一性：示例中所有 <input> 使用相同 id=”vehicle1″，违反 HTML 规范，应改为唯一 ID 或改用 class/name 选择器；建议统一使用 name 或添加自定义 data 属性（如 data-item-id）便于后续扩展。
• 空状态处理：迁移前建议检查 $selectedRows.length > 0，避免无意义操作；
• 视觉反馈：可配合 .fadeOut().fadeIn() 或 CSS 过渡增强用户体验；
• 数据一致性：若涉及后端同步，应在迁移后收集 value 值并调用 API 更新服务端状态。

该方案轻量、可靠、符合 Web 标准，适用于各类基于表格的双向选择场景，是 jQuery 环境下实现“穿梭框”的推荐实践。