JQueryを使用して、ポイントAからポイントBにテーブルを移動する

Question

画像にはページの例があります。左右のテーブルの違いを見てください。左のフィールドは前の反復、右の反復です。私が必要とする：

（オン前の反復フィールド）新しい行

の位置に

1. 設定の背景色を作成、新しい行

その後に右のフィールドに新しい行を移動しますJQueryアニメーション。

最初のイメージ：

第二の画像：私はjQueryのソリューションを自分自身を使用してお勧めします

<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

、あなたはいくつかの仕事に配置する必要があります自分でアニメーションを作ってみましょう。しかし、1つのテーブルの最後の行を取り出して別のテーブルに配置するには、 Oこのような何かを：

$("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>