使用JQuery

Question

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

（在前一个迭代字段中）

1. 在新行的位置设置背景颜色
2. 创建新行

之后用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

我建议您自己使用jQuery解决方案，您必须自己完成一些工作并自己处理动画，但是为了获取一个表的最后一行并将其放在另一个表上，你应该可以做这样的事情：

＆＃13;

＆＃13;

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

＆＃13;

td {
border: 1px solid gray;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;