Move and delete data from one table to another table using javascript or jquery

Question

Step 1 : In table 1st table i want to copy table row the 2nd table, when click on the "copy" button after inputting the value in input text field.(value should be copied instead of input text field)

Step 2 : After click on the "copy" button the button should be change to "Undo" to remove the table row from 2nd table.

Step 3 : after deleting the row from 2nd table the button should be changed again to "copy" button with step 1 functionality in table 1.

Step 4 : the copied row in 2nd table should have "Delete" button.When click on the delete button the row should be deleted from 2nd table and the button should be changed again to"copy" button with step 1 functionality in table 1.

 $(function() { $('#myTable tbody tr').each(function(){ $(this).append('<td><button class="copy">Copy</button></td>'); }); $(document).on('click', 'button.copy', function(){ var $tr = $(this).parents('tr:first').clone(); $tr.appendTo($('#stopsTable > tbody')); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div style="height: 700px;width: 100%;overflow: auto; float: left;"> <table id="myTable" border="1px" style="width: 24%; font-size: 10px; float :left;" > <thead> <tr> <th>S No</th> <th>Stop Name</th> <th>Longitude</th> <th>Latitude</th> <th>ETA</th> <th>Status</th> </tr> </thead> <tbody> <tr > <td >1</td> <td>The Indian Heights School</td> <td><input type="text" width="70"/></td> <td>77.05249</td> <td>06:06:12</td> <td>Ignition_On</td> </tr> <tr > <td >2</td> <td>The Indian Heights School</td> <td><input type="text" width="70"/></td> <td>77.05246</td> <td>06:06:23</td> <td>Ignition_On</td> </tr> <tr > <td >3</td> <td>The Indian Heights School</td> <td>28.56135</td> <td>77.05242</td> <td>06:06:31</td> <td>Start</td> </tr> <tr > <td >4</td> <td>The Indian Heights School</td> <td>28.56139</td> <td>77.05245</td> <td>06:06:41</td> <td>Ignition_On</td> </tr> </tbody> </table> <table id="stopsTable" border="1px" style="width: 24%; margin-left: 10px; font-size: 10px; float :left;"> <thead> <tr> <th>S No</th> <th>Stop Name</th> <th>Longitude</th> <th>Latitude</th> <th>ETA</th> <th>Status</th> </tr> </thead> <tbody> </tbody> </table>

jsfiddle or codepen example will be very appriciated.Thanks in advance.

Answer 1

not exactly what you wanted but might give you the idea.

1. Append button 'copy' to table #myTable
2. copy row from table #myTable to #stopsTable and append button remove while hiding button copy.
3. add class .remove to button remove with remove() function. (It will remove table row when clicking the remove button.)

$(function() {
  $('#myTable tbody tr').each(function() {
    $(this).append('<td><button class="copy">Copy</button></td>');
  });

  $(document).on('click', 'button.copy', function() {
    var $tr = $(this).parents('tr:first').clone();
    $tr.appendTo($('#stopsTable > tbody'));
    $tr.append('<td><button class="remove">Remove</button></td>');
    var $td = $('#stopsTable > tbody > tr').find('td:eq(6)').hide();
  });

  $(document).on('click', 'button.remove', function() {
    $(this).closest('tr').remove()
  });

});