如何通过选中行并点击按钮，用jQuery实现表格行跨表移动？

嗨，我来帮你搞定这个表格行移动的问题～你的代码现在没法正常工作，主要是几个小细节没处理对，我一步步给你梳理并修正：

你的代码存在的问题 #

• 选中行的逻辑错误：你用$(".src-table").parents("tr")会选中所有.src-table表格的父级行，这根本不是你要的“用户选中的行”，得精准定位用户标记的行才行。
• jQuery引入顺序错了：你把jQuery的<script>标签放在了自定义代码后面，浏览器执行你的代码时还没加载jQuery，直接就报错了，必须把jQuery放在最前面。
• 缺少选中行的标记逻辑：你没定义怎么让用户“选中行”，比如用复选框或者点击行高亮，代码自然不知道要移动哪一行。

修正后的完整示例代码 #

假设我们用复选框来让用户选择要移动的行，完整代码如下：

<!-- 必须先引入jQuery，不然$符号会失效 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 源表格 -->
<table class="src-table" border="1">
  <thead>
    <tr>
      <th>选择</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="row-checkbox"></td>
      <td>第一行内容</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="row-checkbox"></td>
      <td>第二行内容</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="row-checkbox"></td>
      <td>第三行内容</td>
    </tr>
  </tbody>
</table>

<!-- 移动按钮 -->
<button id="submit">把选中行移到右边表格</button>

<!-- 目标表格 -->
<table class="target-table" border="1">
  <thead>
    <tr>
      <th>已移动的内容</th>
    </tr>
  </thead>
  <tbody>
    <!-- 移动过来的行会显示在这里 -->
  </tbody>
</table>

<script>
$(function() {
  // 点击按钮时执行移动逻辑
  $(document).on("click", "#submit", function() {
    // 找到所有被勾选的复选框对应的行
    var selectedRows = $(".src-table .row-checkbox:checked").parents("tr");
    // 将选中的行追加到目标表格的tbody中（jQuery的append会自动把行从原表格移除）
    $(".target-table tbody").append(selectedRows);
    // 可选：清空复选框的选中状态，避免重复操作
    $(".src-table .row-checkbox:checked").prop("checked", false);
  });
});
</script>

代码解释 #

1. jQuery引入顺序：把jQuery的<script>放在最前面，确保浏览器加载完jQuery再执行我们的自定义代码。
2. 精准选中行：用.row-checkbox:checked找到用户勾选的复选框，再通过parents("tr")定位到对应的表格行。
3. 移动行的逻辑：jQuery的append方法会自动把元素从原来的DOM位置移到目标位置，所以不需要额外写删除原行的代码。
4. 优化体验：清空复选框的选中状态，防止用户重复点击时重复移动同一行。

如果你不想用复选框，而是用点击行高亮选中的方式，代码可以改成这样：

$(function() {
  // 点击源表格的行，切换选中状态（加个高亮类）
  $(".src-table tbody tr").click(function() {
    $(this).toggleClass("selected");
  });

  // 点击按钮移动选中的行
  $(document).on("click", "#submit", function() {
    var selectedRows = $(".src-table tbody tr.selected");
    $(".target-table tbody").append(selectedRows);
    // 移除选中类，取消高亮
    selectedRows.removeClass("selected");
  });
});

你可以根据自己的需求选其中一种方式～

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