將選中的行從一個表復制到另一表

Question

實際上，我正在尋找將選中的行從一個div的表（表1）復制到另一個div（表2）的表中。 但是，使用以下腳本，當我選中多個復選框時，第一個選中的行將替換為最后一個選中的行。 但是我想像表1的每個選中的行都應該一張一張地出現在表2中。

任何幫助表示贊賞。 提前致謝！！！

的HTML

 <div class="form-group" id="jqcc" >

         <table id="order-table" name="order-table">
             <tr>
                 <th>Select</th>
                 <th>Medication</th>
                 <th>Max Issue Limit</th>                                                        
             </tr>
             <tbody></tbody>                                                  
         </table>                                                
</div>

Java腳本

<script>
        var tableControl = document.getElementById('order-table');
        $('#jqcc').click(function () {
        var result = []
        var x1;
        var tab;

       var count = document.querySelectorAll('input[type="checkbox"]:checked').length;


      $('input:checkbox:checked', tableControl).each(function () {                        

           result.push($(this).parent().next().text() + "," + "<br>"); // refers title of product

           $(this).closest('tr').find('input').each(function () {

           x1 = $(this).val(); // refers price of product


       })

       tab = "<tr><td>" + result + "</td>";
       tab += "<td>" + x1 + "</td>";
       tab += "<td>" + x1 + " </td>";
       tab += "<td><button type='button' onclick='deletePerson(this);' class='btn btn-default'> <span class='glyphicon glyphicon-remove' /></button></td>";
       tab += "</tr>";
       tab += "</tbody>"

       $("#charges").html("<table id='peopleTable' class='table table-bordered table-condensed table-striped'><thead><tr><th>Description</th><th>Actual Amount</th> <th>Claim Amount</th> <th></th></tr></thead>" + tab + "</table>").show();

    });

});
</script>

Answer 1

您嘗試更改：

<script>
    var tableControl = document.getElementById('order-table');
    $('#jqcc').click(function () {
    var result = []
    var x1;
    var tab = "";

   var count = document.querySelectorAll('input[type="checkbox"]:checked').length;
    $("#charges").html("<table id='peopleTable' class='table table-bordered table-condensed table-striped'><thead><tr><th>Description</th><th>Actual Amount</th><th>Claim Amount</th> <th></th></tr></thead><tbody></tbody></table>").show();

  $('input:checkbox:checked', tableControl).each(function () {                        

       result.push($(this).parent().next().text() + "," + "<br>"); // refers title of product

       $(this).closest('tr').find('input').each(function () {

       x1 = $(this).val(); // refers price of product

       // 
       tab = "<tr><td>" + result + "</td>";
       tab += "<td>" + x1 + "</td>";
       tab += "<td>" + x1 + " </td>";
       tab += "<td><button type='button' onclick='deletePerson(this);' class='btn btn-default'> <span class='glyphicon glyphicon-remove' /></button></td>";
       tab += "</tr>";


       // append row html to table with id
       $("#peopleTable").append(tab);

   })    
});

}）;