左右两个表格的内容相互移动

最近实现了一个小功能是将左右两个表格的数据相互移动，以达到人员分类的效果。代码如下

<div class="open-div-box">
  <h2>商户教练列表</h2>
  <!--弹出层主体S-->
  <div class="open-div-con-box" >
    <div class="table-list-3" id="main_div">
      <table id="leftSelect" width="46%" border="0" cellspacing="0" cellpadding="0" style="display: inline-block;margin-right：30px;vertical-align: top;">
      	<tr class='bg-1'>
      		<td colspan='10' align='center' style="background: #c2e39e;">已添加</td>
      		
      	</tr>
        <tr>
          <th align="center" width="5%">教练姓名</th>
          <th align="center" width="5%">教练昵称</th>
          <th align="center" width="2%">选择</th>
        </tr>
        	<!--<tr class='bg-1'><td colspan='10' align='center'>没有教练...</td></tr>-->
        	<tr class='bg-1' >
				<td align='center'>林四岁111</td>
				<td align='center'>Cathy</td>
				<td><input name="stuCheckBox" type="checkbox"/></td>
		   </tr>
		   <tr class='bg-0' >
				<td align='center'>1</td>
				<td align='center'>1</td>
				<td><input name="stuCheckBox" type="checkbox"/></td>
		   </tr>
		   <tr class='bg-1' >
				<td align='center'>周斌</td>
				<td align='center'>1</td>
				<td><input name="stuCheckBox" type="checkbox"/></td>
					
		   </tr>
		   	<tr class='bg-1' id="L-lastLine">
			   <td align='center' colspan='10' align='center'>
			     	<input type="checkbox" value="全选"  class="selectall" />全选
					<input id="toRight" type="button" value="移出" style="margin-left: 10px;" onclick="delTeacher('${teacher.TEACHER_ID}')" />
				</td>	
			
			</tr>
	</table>
	<!--未添加-->
	
	 <table id="rightSelect" width="46%" border="0" cellspacing="0" cellpadding="0" style="display: inline-block;margin-left:30px ;vertical-align: top;">
      	<tr class='bg-1'>
      		<td colspan='10' align='center' style="background: #c2e39e;">未添加</td>
      		
      	</tr>
        <tr>
          <th align="center" width="5%">教练姓名</th>
          <th align="center" width="5%">教练昵称</th>
          <th align="center" width="2%">选择</th>
         
        </tr>
        	<!--<tr class='bg-1'><td colspan='10' align='center'>没有教练...</td></tr>-->
        	<tr class='bg-1' >
				<td align='center'>周斌</td>
				<td align='center'>Cathy</td>
				<td><input name="stuCheckBox" type="checkbox"/></td>
				
		   </tr>
		   <tr class='bg-0' >
				<td align='center'>林四岁</td>
				<td align='center'>Cathy</td>
				<td><input name="stuCheckBox" type="checkbox"/></td>
				
		   </tr>
		   <tr class='bg-1' >
				<td align='center'>周斌</td>
				<td align='center'>Cathy</td>
				<td><input name="stuCheckBox"  type="checkbox"/></td>
			
		   </tr>
		   <tr class='bg-0' >
				<td align='center'>1</td>
				<td align='center'>1</td>
				<td><input name="stuCheckBox" type="checkbox"/></td>	
		   </tr>
		   <tr class='bg-1' >
				<td align='center'>1</td>
				<td align='center'>1</td>
				<td><input name="stuCheckBox" type="checkbox"/></td>
				
					
		   </tr>
		   	<tr class='bg-1' id="R-lastLine">
		   		
			   <td align='center' colspan='10' align='center'>
			   	    <input type="checkbox" class="selectall"  />全选
					<input id="toLeft" type="button" value="添加" style="margin-left: 10px;" onclick="delTeacher('${teacher.TEACHER_ID}')" />
				</td>	
			
			</tr>
	</table>
	
	
	
	
    </div>
    <div class="but-box">
        <input type="button" value="关闭" onClick="parent.SLB();">&nbsp;&nbsp;
        
    </div>
  </div>
  <!--弹出层主体E--> 
</div>

通过jquery控制数据的移动：

<script>
	 $(document).ready(function(){
	 	
                //将左边数据移动到右边
                $("#toRight").click(function(){
                //将左边option中选中的值赋给vSelect变量
                var vSelect=$("#leftSelect input[name='stuCheckBox']:checked");
                //将数据添加到rightSelect中
               $("#R-lastLine").before(vSelect.parent().parent().clone());
                //同时删除leftSelect中的数据
                vSelect.parent().parent().remove();                   
                });
  
//                将右边数据移动到左边
                $("#toLeft").click(function(){
                    var vSelect=$("#rightSelect input[name='stuCheckBox']:checked");
                    //将右边的数据追加到左边列表中
                    $("#L-lastLine").before(vSelect.parent().parent().clone());
                    
//                  vSelect.clone().appendTo("#leftSelect");
                    vSelect.parent().parent().remove();
                });
  



 				//将左边全部数据移到右边

				$('#leftSelect .selectall').click(function(){
                  
	                if(this.checked){
	                        $('#leftSelect input[name="stuCheckBox"]').each(function(){
	                                //此处如果用attr，会出现第三次失效的情况
	                                    $(this).attr("checked",true);
	                                });
	                }else{
	                        $('#leftSelect input[name="stuCheckBox"]').each(function(){
	                                    $(this).removeAttr("checked",false);
	                                });
	                                //$(this).removeAttr("checked");
	                }
                
                });
                  
                
                 //将右边数据全部移到左边
                $('#rightSelect .selectall').click(function(){
                  
	                if(this.checked){
	                        $('#rightSelect input[name="stuCheckBox"]').each(function(){
	                                //此处如果用attr，会出现第三次失效的情况
	                                    $(this).attr("checked",true);
	                                });
	                }else{
	                        $('#rightSelect input[name="stuCheckBox"]').each(function(){
	                                    $(this).removeAttr("checked",false);
	                                });
	                                //$(this).removeAttr("checked");
	                }

       			});


 });
	
</script>

效果如下：