0

I have two tables that are placed side by side and i would to append selected row on the first table to the second tab

i managed to get the data from a selected row and convert it to an array. I tried using the v-bind tag to bind the data values in the second table and its not working

I expect to click a row in a table and that row is added to another table that is just placed on the side of the other table

kgori_dev
  • 154
  • 2
  • 18

1 Answers1

2

What I understood from you question is that you are looking for a jquery code that makes the rows from the two tables to move from one table to the other whenever the user clicks on a row in any of the tables. for example if you click on a row in first table, it moves to the second table and if you click on a row in second table, it moves to the first table. if it is so, then the jquery code could be:

// identify the two tables with IDs for easier access
var tbl1=$('#table_1_id'), tbl2=$('#table_2_id');

// use tbody selector to make sure that you don't bind this event to table heading rows
$('#table_1_id,#table_2_id').find('tbody tr').on('click', moveRow);

function moveRow() {
   // find on which table this row is
   var row = $(this);
   var table_current = row.closest('table');

   // If current table ID equals to first table ID then it means we are in first table
   if (table_current.prop('id')==tbl1.prop('id')) {
      // Then we move the row to second table
      tbl2.find('tbody').append(row);
   } else {
      // The row was in second table so we move it to first table
      tbl1.find('tbody').append(row);
   }

   return;
}
MohammadAli
  • 98
  • 5