javascript - 将选中的行从一个表复制到另一表

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>

Javascript

<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);

   })    
});

});