[英]Add tr element into another table using jquery
如何将表行中的某个元素移动到带有jquery的另一个表中,我不确定是否使用“追加”,因为它也需要会话,这是使用ajax,json,php(购物车)或有角度的最好方法,任何建议将被认真考虑
就像当我单击第一行上的添加时,它将显示为
小提琴>>
<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;
}
移动一行非常容易。 在单击甚至Add
链接的单击中,您都需要创建被单击行的副本。
var tr = $(this).closest('tr').clone();
这将复制单击的行,并在下一行中将其移至第二个表。
$('.tbl-two').append(tr);
对于会话,您至少需要将部件ID存储到变量中。 如果该变量在会话中不存在,则创建它;如果它确实存在,则将Part ID附加在变量的末尾,并使用诸如,
的分隔符。
但是,创建“购物车”表比复制行要复杂一些。
好吧,您有很多事情要理解。 您要实现的是需要JavaScript的客户端。 jQuery或使用其他JavaScript框架取决于您是否达到相同的结果。 如果您试图将此操作(可以执行AJAX样式或常规的post / get样式)记录到数据库或会话中,则需要深入研究服务器端脚本,并且在该世界中您也有很多选择。 为了简单地实现此客户端,我将一个事件绑定到单击的行,并将该行附加到另一张表,然后从原始表中删除。 您需要学习DOM操作。 JQuery在DOM操作方面非常出色。 我建议您使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.