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.

You asking for someone to write code for you. Have you tried to write anything by yourself? It is not a good question as it's too broad. — lorond
– lorond, Commented Aug 28, 2016 at 9:27
i am at beginner level.you can give me an example of that kind . — waqas adil
– waqas adil, Commented Aug 28, 2016 at 10:00

nurainatirah · Accepted Answer · 2020-08-19 10:44:54Z

1

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

Append button 'copy' to table #myTable
copy row from table #myTable to #stopsTable and append button remove while hiding button copy.
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()
  });

});

edited Aug 19, 2020 at 10:44

answered Aug 18, 2020 at 5:55

nurainatirah

112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marsh-wiggle Over a year ago

Welcome to SO. Could you some explanations why this could be helpfull?

nurainatirah Over a year ago

Sorry for the lack of information. I have edited my answer. You can try to run it on jsfiddle.net for better understanding. Hope it helps.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related