when the button is clicked i want the multiple selected checkbox row to be displayed from popup page to parent page

Question

i have a table when the table row is selected.i want that particular row to be appended in another table.

  <table class="myTable" border="1">
       <tr class="table">
            <th class="table">
               ID
            </th>
            <th class="table">
                Name
            </th>
            <th class="table">
                Price
            </th>
        </tr>
        <tr class="table">
            <td class="table">
                1
            </td>
            <td class="table">
                A
            </td>
            <td class="table">
                1500
            </td>
             <td>
              <input type="checkbox" name="">
            </td>
        </tr>
        <tr class="table">
            <td class="table">
                2
            </td>
            <td class="table">
                B
            </td>
            <td class="table">
                3455
            </td>
              <td>
              <input type="checkbox" name="">
            </td>
        </tr>
  </table>
  <table id="printTable" border="1">
  <tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
 </tr>

</table>

i have a popup page where i have a table with multiple checkbox.When the user select any of the checkbox and clicked on button that particular row has to be saved from popup page to parent page

  <script>
 $("table tr").click(function() {

var items=[];
var tablerow = $(this).closest("tr").clone();

var tableData = $(this).children("td").map(function() {
    return $(this).text();
}).get();

   alert("Your data is: " + $.trim(tableData[0]) + " , " +   $.trim(tableData[1]) + " , " + $.trim(tableData[2]));

                $(tablerow).children("td:last").html(tableData);
                items.push(tablerow);
                alert(items);
               tablerow.appendTo($("#printTable"));
       });
      </script>

Answer 1

There is no need to map all the data, you can just clone the tr and append it to the other table. Like so:

<script>
    $("table tr").click(function () {

        // If you don't use a tbody, remove 'tbody' here
        $("#printTable tbody").append($(this).clone());

    });
</script>

Answer 2

EDIT: Used loop instead repeating

Probably not the best answer, but this can insert the value into the second table regardless to the column sorting.

https://jsfiddle.net/o4copkrz/2/

$("#input tr").click(function(){

   var $this = $(this)
   var arrIndex = ["id", "name", "price"]
   var arrData = []
   for (var i = 0; i < arrIndex.length; i++) {
     arrData[arrIndex[i]] = $this.find("[data-" + arrIndex[i] + "]").text()
   }

   var $clone = $("#output thead tr").clone()

   for (var i = 0; i < arrIndex.length; i++) {
     $clone.find("[data-" + arrIndex[i] + "]").text(arrData[arrIndex[i]])
     arrIndex[i]
   };

   $clone.appendTo($("#output tbody"))

})

Answer 3

 <h3>First clone the row by clicking on row, then click on button to add to another table</h3>
<table id="firstTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
<th>Select</th>
</tr>
<tr class="row">
<td>1</td>
<td>Comp</td>
<td>2000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr class="row">
<td>2</td>
<td>mouse</td>
<td>3000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr>
</table>
<button id="appendToTable">Append to table</button>
<table id="printTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
</tr>
</table>
<div id="clonedData" style="display: none;"></div>

<script>
   $(".selectCheck").click(function() {
      if($(this).prop("checked") == true){
         $("#clonedData").append($(this).parent().parent().clone());
         $("#clonedData").find(".removeIt").remove();
      }else{
         var rowCheck = $(this).parent().parent().clone();
         rowCheck.children(".removeIt").remove();
         $('#clonedData tr').each(function(){
           if(rowCheck.html()==$(this).html()){
             $(this).remove();
           } 
         });
       }
 });

 $("#appendToTable").click(function() {
    $("#printTable").append($("#clonedData").children().clone());
    $("#clonedData").html('');
 });

I have also created a fiddle https://jsfiddle.net/kgbet3et/11/ for the same. Please check if it adresses your issue.

Answer 4

 $('#myModal').modal('toggle'); $(document).on('change', 'input[type="checkbox"]', function(e){ if($(this).is(":checked")) { var row = $(this).closest('tr').html(); $('.table2 tbody').append('<tr>'+row+'</tr>'); } else { $('#row').find('input:checkbox[value="' + $(this).val() + '"]').closest('tr').remove(); } $('#row').on('click', ':checkbox', function (event) { $(this).closest('tr').remove(); }); }); 

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <body> <div class="col-md-6"> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times; </button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> <table class="table1 table table-bordered" id="echo"> <h3 style="text-align: center;"></h3> <tr> <td>1</td> <td name="echo">A</td> <td>1500</td> <td><input type="checkbox" value="1" class="check-box"></td> </tr> <tr> <td id="2">2</td> <td name="fetal_echo">B</td> <td>2000</td> <td><input type="checkbox" value="2" class="check-box"></td> </tr> <tr> <td id="1">3</td> <td value="abc">C</td> <td>8500</td> <td><input type="checkbox" value="3" class="check-box"></td> </tr> <p id="output"></p> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="closebtn">Close</button> </div> </div> </div> </div> <table class="table2 table table-bordered" id="row"> <tbody> </tbody> </table> <div> 

@vijay mishra and @Vishnu Bhadoriya thankyou for your support....You are really awesome.