Javascript 使用JQuery将表行从点A移动到点B

在图像上，您可以找到页面示例。看看左表和右表之间的区别。左字段是上一次迭代，右字段是当前迭代。我需要：

（在上一个迭代字段上）

在新行位置设置背景色

创建新行

之后，使用JQuery动画将新行移动到右侧字段

第一张图片：

第二幅图像：

x2
x1
x0
x2
x1
x0
0: 
0
0
0


第2步从第13步开始

我建议自己使用jQuery解决方案，您必须自己做一些工作，自己制作动画，但是为了将一个表的最后一行放到另一个表上，您应该能够执行以下操作：

$（“tr”）。在（“单击”，函数（）{
$（此）.appendTo（#clonedTable”）；
});
td{
边框：1px纯色灰色；
}

单击一行将其移动到另一个表中

数据1
数据2
数据3
数据4
数据5
数据6

数据7
数据8
数据9
你试过
javascript
或
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>