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;
}
Well, you have lots of things to understand. What you want to achieve is client side which requires javascript. Jquery or use of other javascript frameworks is up to you to achieve same result. if you are trying to record this action (you can do AJAX style or regular post/get style) to database or session than you need to dive into serverside scripting and again you have many options in that world too. To achieve this client side simply I will bind an event to clicked row and append the row to another table and remove from original one. You need to learn DOM manipulation. JQuery is pretty good with DOM manupilation. I would suggest you to use that.
Moving a row over is pretty easy. In your click even for your Add link you need to create a copy of the row that was clicked.
var tr = $(this).closest('tr').clone();
This duplicates the clicked row and with our next line we move it to the second table.
$('.tbl-two').append(tr);
As for sessions you'll need to at least store the Part ID into a variable. If the variable doesn't exist in a session, create it, if it does exist append the Part ID to the end of the variable with a delimiter such as ,.
However creating a 'shopping cart' table is a bit more complicated than copying a row over.