本文详解如何基于复选框选择，将 html 表格中已勾选的行（tr）安全、高效地移动到另一张表格中，避免整表移除导致的 dom 结构丢失和事件失效问题。
本文详解如何基于复选框选择，将 html 表格中已勾选的行（tr）安全、高效地移动到另一张表格中，避免整表移除导致的 dom 结构丢失和事件失效问题。
在实际开发中，常见的“双列表选择器”（如权限分配、字段映射等场景）需要支持用户勾选左侧/右侧表格中的部分条目，并通过按钮（如 >、>>、
正确做法是精准定位并迁移选中行，而非整表搬运。jQuery 提供了简洁高效的链式操作：先筛选出带已勾选复选框的
以下是优化后的核心逻辑（适配全部四个按钮）：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
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 === '<p>✅ <strong>关键优势说明：</strong> </p>
- ✅ 零数据丢失：仅移动
节点，未选中行保留在原位置； - ✅ 状态完整保留：复选框的 checked 状态、自定义 data 属性、内联事件均不受影响；
- ✅ 性能友好：无需 .html() 序列化与重新解析，避免 XSS 风险与格式错乱；
- ✅ 语义清晰：closest('tr') 精准向上查找最近的行容器，兼容嵌套结构。
⚠️ 注意事项：
- 所有 的 id 属性在页面中必须唯一（当前示例中多个 id="vehicle1" 会违反 HTML 规范，建议改为 class="item-checkbox" 或动态生成唯一 ID）；
- 若需支持“移动后自动取消勾选”，可在 append() 后添加 $rows.find('input[type="checkbox"]').prop('checked', false)；
- 如表格含表头 ，应确保仅操作
内的
，避免误移标题行（可限定为 #tblgroup1 tbody input:checked）； - 建议为按钮添加 disabled 状态反馈（如无选中项时禁用），提升用户体验。
通过此方案，开发者可构建健壮、可维护的双向列表交互组件，兼顾功能完整性与 DOM 操作安全性。
