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');
  }
}

关键技术点说明

• input:checked：精准筛选当前勾选的复选框，未选中的行不受影响；
• .closest('tr')：向上查找最近的 父容器，整行（包括复选框和标签）一并移动；
• .appendTo(selector) / .append()：实现真正的 DOM 移动，而非克隆——原位置自动解绑，插入目标位置后，事件监听器和数据（只要未手动销毁）均可保留；
• 切勿使用 .html() + .remove()：这样做会导致 ID 重复（例如多个 id="vehicle1"）、表头样式丢失、破坏 Vue/React 绑定，后果严重。

注意事项与增强建议

• ID 唯一性修复：示例中所有复选框都使用同一个 id="vehicle1"，这严重违反 HTML 规范。应改为唯一 ID，或者改用 class + name 进行区分。例如：

  Abc

• 空选处理：若用户未勾选任何选项就点击按钮，最好弹出提示：

  if ($selectedRows.length === 0) {
    alert('请至少选择一项进行移动');
    return;
  }

• 视觉反馈：移动后原表格的选中状态自然消失（因为 DOM 已迁移），但建议同步清空搜索框（例如 #txtsearch），保持界面整洁；
• 性能优化：当表格行数超过 500 行时，可考虑加入防抖或分批移动，避免卡顿。

该方案轻量、可靠，完全符合 Web 标准，能够稳定支撑表格双向选择的交互场景——是 jQuery 表格操作中一个经典且实用的实践模式。