jQuery实现行在两个表格间双向移动的需求咨询

嘿，我明白你要实现的是两个房产表格之间的行迁移功能——点击复选框把可用房产移到已选列表，还能反向移回去对吧？我之前做过类似的需求，给你整理了一套实用的实现方案：

• 给两个DataTable的每行都加上复选框，监听复选框的点击事件
• 正向迁移（可用→已选）：选中可用表格的复选框时，提取该行数据添加到已选表格，同时隐藏原表格的该行
• 反向迁移（已选→可用）：选中已选表格的复选框时，找到可用表格中对应的行并恢复显示，同时从已选表格移除该行
• 额外支持全选功能，提升批量操作效率

HTML结构 #

<!-- 可用房产表格 -->
<div class="table-container">
  <h3>可用房产</h3>
  <table id="availableProperties" class="display" style="width:100%">
      <thead>
          <tr>
              <th><input type="checkbox" id="selectAllAvailable"></th>
              <th>房产ID</th>
              <th>地址</th>
              <th>建筑面积</th>
          </tr>
      </thead>
      <tbody></tbody>
  </table>
</div>

<!-- 已选房产表格 -->
<div class="table-container">
  <h3>已选房产</h3>
  <table id="selectedProperties" class="display" style="width:100%">
      <thead>
          <tr>
              <th><input type="checkbox" id="selectAllSelected"></th>
              <th>房产ID</th>
              <th>地址</th>
              <th>建筑面积</th>
          </tr>
      </thead>
      <tbody></tbody>
  </table>
</div>

JavaScript逻辑 #

// 初始化可用房产表格（替换ajax地址为你的实际数据源）
const availableTable = $('#availableProperties').DataTable({
    ajax: '/api/available-properties',
    columns: [
        { data: null, defaultContent: '<input type="checkbox" class="property-checkbox">' },
        { data: 'id' },
        { data: 'address' },
        { data: 'area' }
    ],
    dom: 'rtip' // 简化工具栏，可根据需求调整
});

// 初始化已选房产表格（初始为空）
const selectedTable = $('#selectedProperties').DataTable({
    columns: [
        { data: null, defaultContent: '<input type="checkbox" class="property-checkbox">' },
        { data: 'id' },
        { data: 'address' },
        { data: 'area' }
    ],
    dom: 'rtip'
});

// --------------------------
// 正向迁移：可用 → 已选
// --------------------------
$('#availableProperties').on('change', '.property-checkbox', function() {
    const $row = $(this).closest('tr');
    const rowData = availableTable.row($row).data();

    if (this.checked) {
        // 添加到已选表格并刷新
        selectedTable.row.add(rowData).draw();
        // 隐藏可用表格中的该行（draw(false)避免重新分页/排序）
        availableTable.row($row).hide().draw(false);
        // 取消复选框选中状态，避免重复触发
        this.checked = false;
    }
});

// --------------------------
// 反向迁移：已选 → 可用
// --------------------------
$('#selectedProperties').on('change', '.property-checkbox', function() {
    const $row = $(this).closest('tr');
    const rowData = selectedTable.row($row).data();

    if (this.checked) {
        // 通过房产ID找到可用表格中对应的行
        const targetRowIndex = availableTable.rows().data().toArray().findIndex(row => row.id === rowData.id);
        if (targetRowIndex !== -1) {
            // 恢复显示该行
            availableTable.row(targetRowIndex).show().draw(false);
        }
        // 从已选表格移除该行并刷新
        selectedTable.row($row).remove().draw();
        // 取消复选框选中状态
        this.checked = false;
    }
});

// --------------------------
// 全选功能
// --------------------------
// 可用表格全选
$('#selectAllAvailable').on('change', function() {
    $('#availableProperties .property-checkbox:not(:checked)').trigger('change');
});

// 已选表格全选
$('#selectAllSelected').on('change', function() {
    $('#selectedProperties .property-checkbox:not(:checked)').trigger('change');
});

• 行状态管理：用DataTables的row().hide()和row().show()控制行显示，比直接删除DOM更稳妥，保留原数据方便反向恢复
• 数据匹配：以房产ID作为唯一标识匹配两行数据，确保反向迁移时能精准定位原行
• 操作防重复：迁移完成后取消复选框选中状态，避免用户重复点击触发错误
• 体验优化：draw(false)刷新表格时不重置分页和排序，操作更流畅

内容的提问来源于stack exchange，提问作者RobG