如何将行从第二个表移回到初始表?

时间:2017-08-10 01:18:28

标签: javascript html

我有两张桌子,我需要在它们之间移动行。第一个表有添加按钮,它将表1中的选定项添加到表2。我的添加工作正常,并删除第二个表工作但它确实。

我的桌子

<table id="stockForOrder" class="display">
    <thead>
        <tr>
            <th>Book Name</th>
            <th>Price</th>
            <th>ISNB</th>
            <th>Available Quantity</th>
            <th>Quantity</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML5/CSS3 Fundamentals</td>
            <td>R600.00</td>
            <td>00000064</td>
            <td><input type="text" id="quantityAvaliable" 
                name="quantityAvaliable" class="form-control"
                readonly value="21" /></td>
            <td><input type="text" id="quantity"
                name="quantity" class="form-control" value="" /></td>
            <td><input class="addLineItem" type="button" 
                value="Add"></td>
        </tr>
    </tbody> 

 </table>

 <table id="toOrder" class="display">
    <thead>
        <tr>
            <th>Book Name</th>
            <th>Price</th>
            <th>ISNB</th>
            <th>Available Quantity</th>
            <th>Quantity</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
    <tbody>
 <table>

Java脚本代码

   //When the button is clicked create table 2
   $(".addLineItem").on("click", function() {

       var itemsBooks = [];
       var row = $(this).closest("tr").clone();
       itemsBooks.push(row);
       row.appendTo($("#toOrder"));
       $(this).closest('tr').remove();
       $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove');

   });
   //remove table 1 from table 2             
   $('table').on('click', '.RemoveRow', function(){
      $(this).closest('tr').remove();
   });

1 个答案:

答案 0 :(得分:1)

   $('#stockForOrder').on('click', '.addLineItem', function() {
   //     $(".addLineItem").on("click", function() {
        var itemsBooks = [];
        row = $(this).closest("tr").clone();
        itemsBooks.push(row);
        row.appendTo($("#toOrder"));
        $(this).closest('tr').remove();
        $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove');

    });

    //remove table 1 from table 2
    $('#toOrder').on('click', '.RemoveRow', function(){
        row = $(this).closest("tr").clone();
        row.appendTo($("#stockForOrder"));
        $(this).closest('tr').remove();
        $('input[type="button"]', row).removeClass('RemoveRow').addClass('addLineItem').val('Add');
    });