基于选择项实现选中条目在两个表格组间互换的问题

问题说明 #

需要实现两个表格组之间的条目互换：勾选左侧/右侧表格的条目后，点击对应按钮，将选中条目移动到另一组表格中。当前代码执行时会把整个表格移除，无法实现仅移动选中项的需求。

原代码问题分析 #

原代码中直接获取整个表格的HTML内容，然后删除原表格并将内容追加到目标表格，这会导致整个表格的所有条目都被移动，同时原表格被删除，完全偏离了仅移动选中项的需求。

修正后的实现代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form" class="row">
  <div class="col-5">
    <fieldset style="border: 1px solid #cccc;">
      <legend>左侧组</legend>
      筛选: <input id="txtsearch" placeholder="输入关键词筛选" name="filter1">
      <div style="height: 250px; overflow-y: scroll; overflow-x: hidden;">
        <table id="tblgroup1">
          <tr>
            <td><input type="checkbox" id="vehicle1" name="vehicle" value="Bike1"></td>
            <td><label for="vehicle1">Abc</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle2" name="vehicle" value="Bike2"></td>
            <td><label for="vehicle2">Def</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle3" name="vehicle" value="Bike3"></td>
            <td><label for="vehicle3">Ghi</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle4" name="vehicle" value="Bike4"></td>
            <td><label for="vehicle4">Jkl</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle5" name="vehicle" value="Bike5"></td>
            <td><label for="vehicle5">Mno</label></td>
          </tr>
        </table>
      </div>
    </fieldset>
  </div>

  <div id="dvswapbtns" class="col-2 btn-group-vertical dvswapbtns">
    <button type="button" class="btn btn-primary" data-action="all-right">>>> 全部移到右侧</button><br>
    <button type="button" class="btn btn-primary" data-action="selected-right">>> 选中移到右侧</button><br>
    <button type="button" class="btn btn-primary" data-action="selected-left"><< 选中移到左侧</button><br>
    <button type="button" class="btn btn-primary" data-action="all-left"><<< 全部移到左侧</button><br>
  </div>

  <div class="col-5">
    <fieldset style="border: 1px solid #cccc;">
      <legend>右侧组</legend>
      筛选: <input id="txtsearch2" placeholder="输入关键词筛选" name="filter2">
      <div style="height: 250px; overflow-y: scroll; overflow-x: hidden;">
        <table id="tblgroup2">
          <tr>
            <td><input type="checkbox" id="vehicle6" name="vehicle" value="Bike6"></td>
            <td><label for="vehicle6">CCC</label></td>
          </tr>
          <tr>
            <td><input type="checkbox" id="vehicle7" name="vehicle" value="Bike7"></td>
            <td><label for="vehicle7">DDD</label></td>
          </tr>
        </table>
      </div>
    </fieldset>
  </div>
</div>

JavaScript部分 #

$(function() {
  // 绑定按钮点击事件
  $('#dvswapbtns button').on('click', function() {
    const action = $(this).data('action');
    
    switch(action) {
      case 'all-right':
        // 全部移到右侧
        $('#tblgroup1 tr').appendTo('#tblgroup2');
        break;
      case 'selected-right':
        // 选中项移到右侧
        $('#tblgroup1 input:checked').closest('tr').appendTo('#tblgroup2');
        break;
      case 'selected-left':
        // 选中项移到左侧
        $('#tblgroup2 input:checked').closest('tr').appendTo('#tblgroup1');
        break;
      case 'all-left':
        // 全部移到左侧
        $('#tblgroup2 tr').appendTo('#tblgroup1');
        break;
    }
    
    // 移动后清空选中状态
    $('input:checked').prop('checked', false);
  });
});

关键改进点 #

• 用data-action属性替代文本判断，避免文本变化导致功能失效，代码更健壮
• 仅移动目标行：通过closest('tr')找到选中checkbox所在的行，用appendTo()直接移动该行到目标表格，不会删除原表格
• 修复了原HTML中checkbox的id重复问题，保证label与checkbox的关联正确
• 移动后自动清空选中状态，提升用户体验

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