点击追加表行至另一表后，搜索功能致已追加行丢失的问题

阿华AIGC实验室

2026-5-20

解决表格行迁移+搜索保留选中行的方案

嘿，我刚好碰到过类似的问题，给你一套靠谱的解决方案！核心思路是用数据来驱动视图，而不是直接操作DOM行，这样不管原表格怎么搜索刷新，选中的行数据都能稳稳保存，还能实现独立表格统一删除的需求。

第一步：用全局数组存储选中行数据

先定义一个数组来存选中的行信息，把数据和DOM渲染分离，再也不怕搜索清空了：

// 全局数组，专门存选中的行数据（可根据你的表格结构调整字段）
let selectedRows = [];

第二步：绑定原表格行的点击事件（用事件委托！）

因为搜索时原表格可能会重新渲染DOM，直接绑定行点击会失效，所以用事件委托绑定到父元素上：

// 事件委托：点击原表格的行时，把数据存入数组
$('body').on('click', '.source-table tbody tr', function() {
  // 提取当前行的所有列数据，这里假设第一列是唯一ID（用来去重）
  const rowData = {
    id: $(this).find('td:nth-child(1)').text(),
    column1: $(this).find('td:nth-child(2)').text(),
    column2: $(this).find('td:nth-child(3)').text(),
    // 按你的表格列数继续添加字段
  };

  // 检查是否已经添加过，避免重复
  const alreadySelected = selectedRows.some(row => row.id === rowData.id);
  if (!alreadySelected) {
    selectedRows.push(rowData);
    // 立刻更新目标表格
    renderTargetTable();
  }
});

第三步：写渲染目标表格的函数

每次数组变化时，重新渲染独立的目标表格，目标表的内容完全由数组控制，和原表格状态无关：

function renderTargetTable() {
  const $targetTbody = $('.target-table tbody');
  $targetTbody.empty(); // 先清空旧内容

  // 遍历数组，生成新的表格行
  selectedRows.forEach(row => {
    const $newRow = $(`
      <tr>
        <td>${row.id}</td>
        <td>${row.column1}</td>
        <td>${row.column2}</td>
        <td><button class="delete-btn">删除</button></td>
      </tr>
    `);
    $targetTbody.append($newRow);
  });

  // 给删除按钮绑定事件
  $('.delete-btn').on('click', function() {
    const rowId = $(this).closest('tr').find('td:nth-child(1)').text();
    // 从数组中移除对应数据
    selectedRows = selectedRows.filter(row => row.id !== rowId);
    // 重新渲染表格
    renderTargetTable();
  });
}