使用javascript或jquery將數據從一個表移動和刪除到另一個表

Question

第 1 步：在第 1 個表中，我想復制第 2 個表中的表行，當在輸入文本字段中輸入值后單擊“復制”按鈕時。（應復制值而不是輸入文本字段）

第 2 步：單擊“復制”按鈕后，按鈕應更改為“撤消”以從第二個表格中刪除表格行。

第 3 步：從第二個表中刪除行后，按鈕應再次更改為“復制”按鈕，具有表 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

不完全是你想要的，但可能會給你這個想法。

1. 將按鈕“復制”附加到表 #myTable
2. 將表#myTable 中的行復制到#stopsTable 並在隱藏按鈕副本時追加按鈕刪除。
3. 使用 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()
  });

});