将已检查的行从一个表复制到另一个表

时间:2017-06-05 01:51:01

标签: javascript jquery

实际上我希望将已检查的行从一个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>

1 个答案:

答案 0 :(得分: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);

   })    
});

});