How To Get Table Row Data In Different Table When Selecting A Checkbox?

I have a table in which some fields are given, like Service, Amount, tax, Action, When click on checkbox I want the all table row data could show on a different table and when I se

Solution 1:

$(document).ready(function(){
  $(document).on("change",".tot_amount",function(){  
  if (this.checked){  
     var servicetext = $(this).closest("tr").find('td').eq(0).find('span').text();
     var totalamt = $('#tot_amount').val();
     if(totalamt != ''){
     $('#tot_amount').val(totalamt + ", " + servicetext); 
     }
     else{
     $('#tot_amount').val(servicetext);
     }  
     
      var $tr = $(this).closest("tr");
      $("#table2 tbody").append("<tr class='servicetr'>" + $tr.html() + "</tr>");
  }  
  else{
   var $tr = $(this).closest("tr");  
   $('#table2').find(".servicetr").each(function(){    
     if($tr.html() == $(this).html())
     $(this).remove();  
   });
  
  }
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablecellspacing="0"rules="all"border="1"id="table1"style="border-collapse:collapse;"><tbody><tr><thscope="col">Service </th><thscope="col">Amount</th><thscope="col">tax</th><thscope="col">Action</th></tr><trclass='servicetr'><tdclass="service"><span>Subscription Charges</span></td><td><span>500.00</span></td><tdclass="service"><span >90.00</span></td><td ><inputtype="checkbox"data-toggle="checkbox"class="tot_amount"value="590.00"  /></td></tr><trclass='servicetr'><td><span>registration fees</span></td><td ><span>200.00</span></td><td ><span >80.00</span></td><td ><inputtype="checkbox"data-toggle="checkbox"class="tot_amount"value="590.00"  /></td></tr></tbody></table><br/><tablecellspacing="0"rules="all"border="1"id="table2"style="border-collapse:collapse;"><tbody><tr><thscope="col">Service </th><thscope="col">Amount</th><thscope="col">tax</th><thscope="col">Action</th></tr></tbody></table><br/><inputtype="text"name="tot_amount"id="tot_amount"style="width:100%;">

Solution 2:

Try this: You can bind click handlers for checkboxes where remove TR along with child elements and push it to another table.

$(document).ready(function(){
  $(document).on("change",".tot_amount",function(){
      var $tr = $(this).closest("tr");
      $("#table2 tbody").append("<tr>" + $tr.html().replace('class="tot_amount"','') + "</tr>");
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablecellspacing="0"rules="all"border="1"id="table1"style="border-collapse:collapse;"><tbody><tr><thscope="col">Service </th><thscope="col">Amount</th><thscope="col">tax</th><thscope="col">Action</th></tr><tr><td><span>Subscription Charges</span></td><td ><span>500.00</span></td><td ><span >90.00</span></td><td ><inputtype="checkbox"data-toggle="checkbox"class="tot_amount"value="590.00"  /></td></tr><tr><td><span>registration fees</span></td><td ><span>200.00</span></td><td ><span >80.00</span></td><td ><inputtype="checkbox"data-toggle="checkbox"class="tot_amount"value="590.00"  /></td></tr></tbody></table><tablecellspacing="0"rules="all"border="1"id="table2"style="border-collapse:collapse;"><tbody><tr><thscope="col">Service </th><thscope="col">Amount</th><thscope="col">tax</th><thscope="col">Action</th></tr></tbody></table><inputtype="text"name="tot_amount">