使用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>