Question

第1步：在第1表中，我想在第2个表中复制表行，在输入文本字段中输入值后单击“复制”按钮。（应该复制值输入文本字段）

第2步：点击“复制”按钮后，按钮应更改为“撤消”以从第2个表格中删除表格行。

第3步：从第2个表中删除行后，应再次将按钮更改为“复制”按钮，并使用表1中的步骤1功能。

第4步：第2个表中复制的行应该有“删除”按钮。当点击删除按钮时，应该从第2个表中删除该行，并且该按钮应该再次更改为“复制” “表1中步骤1功能的按钮。

$(function() {
    $('#myTable tbody tr').each(function(){
        $(this).append('<td><button class="copy">Copy</button></td>');
    });
    
    $(document).on('click', 'button.copy', function(){
        var $tr = $(this).parents('tr:first').clone();
        
        $tr.appendTo($('#stopsTable > tbody'));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="height: 700px;width: 100%;overflow: auto; float: left;">
            <table id="myTable" border="1px" style="width: 24%; font-size: 10px; float :left;" >
                <thead>
                    <tr>
                        <th>S No</th>
                        <th>Stop Name</th>
                        <th>Longitude</th>
                        <th>Latitude</th>
                        <th>ETA</th>
                        <th>Status</th>
                     
                    </tr>
                </thead>
                <tbody>
                    <tr  >

                        <td >1</td>
                        <td>The Indian Heights School</td>
                        <td><input type="text" width="70"/></td>
                        <td>77.05249</td>
                        <td>06:06:12</td>
                        <td>Ignition_On</td>
            

                    </tr>


                    <tr  >

                        <td >2</td>
                        <td>The Indian Heights School</td>
                        <td><input type="text" width="70"/></td>
                        <td>77.05246</td>
                        <td>06:06:23</td>
                        <td>Ignition_On</td>
                   
                    </tr>


                    <tr  >

                        <td >3</td>
                        <td>The Indian Heights School</td>
                        <td>28.56135</td>
                        <td>77.05242</td>
                        <td>06:06:31</td>
                        <td>Start</td>
                 
                    </tr>


                    <tr  >

                        <td >4</td>
                        <td>The Indian Heights School</td>
                        <td>28.56139</td>
                        <td>77.05245</td>
                        <td>06:06:41</td>
                        <td>Ignition_On</td>
                       
                    </tr>
                </tbody>
    </table>
    
      <table id="stopsTable" border="1px" style="width: 24%; margin-left: 10px; font-size: 10px; float :left;">
                <thead>
                    <tr>

                        <th>S No</th>
                        <th>Stop Name</th>
                        <th>Longitude</th>
                        <th>Latitude</th>
                        <th>ETA</th>
                        <th>Status</th>
                      
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

jsfiddle或codepen的例子非常适合。谢谢。

Answer 1

不完全是您想要的，但可能会给您带来灵感。

将“复制”按钮附加到表#myTable
将表#myTable中的行复制到#stopsTable中，并在隐藏按钮副本的同时删除附加按钮。
使用remove（）函数将class .remove添加到按钮remove中。（单击“删除”按钮时，它将删除表格行。）

$(function() {
  $('#myTable tbody tr').each(function() {
    $(this).append('<td><button class="copy">Copy</button></td>');
  });

  $(document).on('click', 'button.copy', function() {
    var $tr = $(this).parents('tr:first').clone();
    $tr.appendTo($('#stopsTable > tbody'));
    $tr.append('<td><button class="remove">Remove</button></td>');
    var $td = $('#stopsTable > tbody > tr').find('td:eq(6)').hide();
  });

  $(document).on('click', 'button.remove', function() {
    $(this).closest('tr').remove()
  });

});

使用javascript或jquery将数据从一个表移动到另一个表

1 个答案: