本文详解如何基于复选框选择，将 HTML 表格中已勾选的 行精准移入另一张表格，避免误删整表结构，并提供健壮、可复用的 jQuery 实现方案。

本文详解如何基于复选框选择，将 html 表格中已勾选的 `

` 行精准移入另一张表格，避免误删整表结构，并提供健壮、可复用的 jquery 实现方案。

在实际开发中，常见的“双列表选择器”（如权限分配、字段映射等场景）需要支持用户勾选左侧/右侧表格中的条目，并通过按钮（如 >、>>、销毁整个 DOM 结构（包括事件绑定、动态状态、ID 重复等），且未区分“是否选中”，导致整张表被搬移，违背业务意图。

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

正确做法是仅操作被选中的 元素本身——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 === '<h3>? 关键技术点说明</h3>

• input:checked：精准筛选当前处于勾选状态的复选框；
• .closest('tr')：向上查找最近的 父容器，确保整行（含 checkbox 和 label）被移动；
• .appendTo(selector) / .append()：原生 DOM 移动（非克隆），自动从原位置解绑并插入目标位置，保留所有事件监听器与数据（前提是未手动销毁）；
• 避免 .html() + .remove()：防止 ID 重复（如多个 id="vehicle1"）、丢失表头/样式上下文、破坏 Vue/React 等框架绑定。

⚠️ 注意事项与增强建议

• ID 唯一性修复：示例中所有 checkbox 使用相同 id="vehicle1"，违反 HTML 规范。应改为唯一 ID 或改用 class + name 区分：

  <input type="checkbox" class="item-checkbox" name="field_abc" value="Bike1"><label>Abc</label>

• 空选处理：可增加提示避免无效操作：

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

• 视觉反馈：移动后清空原表格选中状态（因 DOM 已迁移，无需额外操作），但建议重置 #txtsearch 输入框以保持界面一致性；
• 性能优化：对于超大表格（>500 行），可添加防抖或分批处理逻辑。

该方案轻量、可靠、符合 Web 标准，适用于任何基于表格的双向选择交互场景，是 jQuery 表格操作的经典实践模式。