How to move some element in table row, into another table with jquery, i'm not sure with 'append' because it need session too, which is the best method, using ajax, json, php (cart), or maybe angular, any advice will be appreciated
like when i click add on the first row, it will shown like this
Fiddle >>
<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;
}