使用jQuery将点表A从点A移动到点B

Question

在图像上可以找到页面示例。查看左右表格之间的区别。左场是先前的迭代，右 - 当前迭代。我需要：

（在以前的迭代场）对新行

的位置

1. 设置背景颜色创建新行

之后移到新行权场JQuery动画。

第一张图片：

2图像：

<div class="control"> 
    <div class="prev_iter"> 
     <div class="truthTable"> 
      <table class="TT"> 
       <tbody> 
       <tr> 
        <th class="bit" style="border: none"> </th> 
        <th class="bit" style="background-color: #87D37C">x<sub>2</sub></th> 
        <th class="bit" style="background-color: #87D37C">x<sub>1</sub></th> 
        <th class="bit" style="background-color: #87D37C">x<sub>0</sub></th> 
       </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
    <div class="current_iter"> 
     <div class="truthTable"> 
      <table class="TT"> 
       <tbody> 
       <tr> 
        <th class="bit" style="border: none"> </th> 
        <th class="bit" style="background-color: #87D37C">x<sub>2</sub></th> 
        <th class="bit" style="background-color: #87D37C">x<sub>1</sub></th> 
        <th class="bit" style="background-color: #87D37C">x<sub>0</sub></th> 
       </tr> 
       <tr> 
        <td class="bit" style="border: none">0: </td> 
        <td class="bit">0</td> 
        <td class="bit">0</td> 
        <td class="bit">0</td> 
       </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
    <br> 
    <div class="controlButtons">  
     <input id="back" name="back" onclick="controllerSwitchSteps(this.id);" type="button" value="&lt;Previous"> 
     Step <span id="stepNumber">2</span> from <span id="totalSteps">13</span> 
     <input id="next" name="next" onclick="controllerSwitchSteps(this.id);" type="button" value="Next&gt;"> 
    </div> 
</div> 

Answer 1

我建议使用jQuery的解决方案我自己，你就必须把一些工作你自己和动画自己动手，但为了把一张桌子的最后一行放在另一张桌子上，你应该能够Ø做这样的事情：

$("tr").on("click", function() { 
 
    $(this).appendTo("#clonedTable"); 
 
});

td { 
 
border: 1px solid gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> Click on a row to move it to the other table!</p> 
 

 
<table id="originalTable"> 
 
    <tr> 
 
    <td>Data 1 </td> 
 
    <td>Data 2 </td> 
 
    <td>Data 3 </td> 
 
    </tr> 
 
<tr> 
 
    <td>Data 4 </td> 
 
    <td>Data 5 </td> 
 
    <td>Data 6 </td> 
 
    </tr> 
 
</table> 
 

 
<hr /> 
 

 
<table id="clonedTable"> 
 
    <tr> 
 
    <td>Data 7</td> 
 
    <td>Data 8</td> 
 
    <td>Data 9</td> 
 
    </tr> 
 
</table>