如何使用 jQuery 实现表格间选中行的精准移动与交换

本文详解如何基于复选框选择，将 html 表格中已勾选的行（tr）安全、高效地移动到另一张表格中，避免整表移除导致的 dom 结构丢失和事件失效问题。

本文详解如何基于复选框选择，将 html 表格中已勾选的行（tr）安全、高效地移动到另一张表格中，避免整表移除导致的 dom 结构丢失和事件失效问题。

在实际开发中，常见的“双列表选择器”（如权限分配、字段映射等场景）需要支持用户勾选左侧/右侧表格中的部分条目，并通过按钮（如 >、>>、<、<<）将其单向或批量移动至目标区域。原始代码中直接调用 $(“#tblgroup1”).remove() 会导致整个表格被销毁——不仅丢失所有未选中行，更会清空绑定的事件监听器、表单状态及 DOM 引用，造成数据不可逆丢失。

正确做法是精准定位并迁移选中行，而非整表搬运。jQuery 提供了简洁高效的链式操作：先筛选出带已勾选复选框的 <tr> 元素，再将其从原父容器中“剪切”并追加到目标表格中。该操作本质是 DOM 节点的重挂载（reparenting），不触发克隆或序列化，保留原始元素的所有属性、事件绑定与内部状态（如 checkbox 的 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);
  }
}

✅ 关键优势说明：

• ✅ 零数据丢失：仅移动 <tr> 节点，未选中行保留在原位置；
• ✅ 状态完整保留：复选框的 checked 状态、自定义 data 属性、内联事件均不受影响；
• ✅ 性能友好：无需 .html() 序列化与重新解析，避免 XSS 风险与格式错乱；
• ✅ 语义清晰：closest(‘tr’) 精准向上查找最近的行容器，兼容嵌套结构。

⚠️ 注意事项：

• 所有 <input type=”checkbox”> 的 id 属性在页面中必须唯一（当前示例中多个 id=”vehicle1″ 会违反 HTML 规范，建议改为 class=”item-checkbox” 或动态生成唯一 ID）；
• 若需支持“移动后自动取消勾选”，可在 append() 后添加 $rows.find(‘input[type=”checkbox”]’).prop(‘checked’, false)；
• 如表格含表头 <thead>，应确保仅操作 <tbody> 内的 <tr>，避免误移标题行（可限定为 #tblgroup1 tbody input:checked）；
• 建议为按钮添加 disabled 状态反馈（如无选中项时禁用），提升用户体验。

通过此方案，开发者可构建健壮、可维护的双向列表交互组件，兼顾功能完整性与 DOM 操作安全性。