Javascript 使用jquery将tr元素添加到另一个表中

如何使用jquery将表行中的某些元素移动到另一个表中，我不确定是否使用“append”，因为它也需要session，这是最好的方法，使用ajax、json、php（cart），或者angular，任何建议都将不胜感激

就像我在第一行单击add时，它会显示如下

拨弄

零件号
描述
赫特
运货马车
1,001
洛勒姆
乱数假文
1,002
艾米特
圣骑士
1,003
整数
nec
1,003
自由人
塞德
1,004
达皮布斯
直径
1,005
纳拉
奎斯
1,006
尼布
元素
1,007
矢状体
乱数假文
1,008
福斯
nec
1,009
奥古斯
森佩尔
1,010
马萨
前庭
1,011
埃吉特
纳拉
1,012
塔西蒂
社会SQU
1,013
扭矩
每
1,014
每
接受者
1,015
汽水
舌苔
不
零件号
描述
数量/单位
期望数量
赫特（美元）
估计总数（元）
删除
1.
洛勒姆
乱数假文
1.
JS微调器（-）3（+）
$12
$36
CSS:
.零件容器{
宽度：100%；
显示：块；
身高：551px；
}
.部分权利{
宽度：100%；
浮动：左；
}
瑞德先生{
背景：红色；
}

嗯，你有很多事情要理解。您想要实现的是需要javascript的客户端。Jquery或其他javascript框架的使用取决于您能否实现相同的结果。如果您试图将此操作（您可以使用AJAX样式或常规post/get样式）记录到数据库或会话中，那么您需要深入服务器端脚本编写，而且您在这个世界上也有很多选择。为了实现这个客户端，我将绑定一个事件到单击的行，并将该行附加到另一个表中，然后从原始表中删除。您需要学习DOM操作。JQuery非常适合DOM的制作。我建议你用这个

移动一行非常容易。在您的

Add

链接中，您需要创建所单击行的副本

var tr=$（this.close（'tr'）.clone（）；

这将复制单击的行，并使用下一行将其移动到第二个表中

$（'.tbl two'）。追加（tr）；

对于会话，您至少需要将部件ID存储到一个变量中。如果变量在会话中不存在，请创建它，如果存在，请使用分隔符（如

，

）将零件ID附加到变量的末尾

---

但是，创建“购物车”表比复制一行要复杂一些。

要添加哪一行以及在哪一个表中？给

添加

按钮一个单击事件。从它的行中获取数据。在下一个表中插入一行。

<div class="part-container">

<div class="part-right">
 <div class="table-responsive" id="right-table">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Part Number</th>
                  <th>Desc</th>
                  <th>Het</th>
                  <th>Cart</th>
                </tr>
              </thead>
              <tbody>
                <tr class="part_number" rel="part_number_9505092011120026">
                  <td>1,001</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                    <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,002</td>
                  <td>amet</td>
                  <td>consectetur</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,003</td>
                  <td>Integer</td>
                  <td>nec</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,003</td>
                  <td>libero</td>
                  <td>Sed</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,004</td>
                  <td>dapibus</td>
                  <td>diam</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number" rel="part_number_1905092011120046">
                  <td>1,005</td>
                  <td>Nulla</td>
                  <td>quis</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,006</td>
                  <td>nibh</td>
                  <td>elementum</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,007</td>
                  <td>sagittis</td>
                  <td>ipsum</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number" rel="part_number_5305092011120107">
                  <td >1,008</td>
                  <td>Fusce</td>
                  <td>nec</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,009</td>
                  <td>augue</td>
                  <td>semper</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,010</td>
                  <td>massa</td>
                  <td>Vestibulum</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,011</td>
                  <td>eget</td>
                  <td>nulla</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number" rel="part_number_1805092011120139">
                  <td>1,012</td>
                  <td>taciti</td>
                  <td>sociosqu</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,013</td>
                  <td>torquent</td>
                  <td>per</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number" rel="part_number_9805092011120157">
                  <td>1,014</td>
                  <td>per</td>
                  <td>inceptos</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,015</td>
                  <td>sodales</td>
                  <td>ligula</td>
                  <td><a href="#">Add</a></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
       </div>
<div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>No</th>
                  <th>Part Number</th>
                  <th>Desc</th>
                  <th>Qty / Unit</th>
                  <th>Desire QTY</th>
                  <th>Het ( $ )</th>
                  <th>Estimate Total ( $ )</th>
                  <th>Delete </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                  <td>1</td>
                  <td>JS Spinner ( - ) 3 ( + )</td>
                  <td>$12</td>
                  <td>$36</td>
                    <td><a href="#">Delete</a></td>
                </tr>
              </tbody>
            </table>
          </div>

CSS : 

.part-container { 
    width: 100%; 
    display: block;  
    height: 551px;
}
.part-right { 
    width: 100%; 
    float: left;  
}
.red {
    background: red;
}