[英]Move and delete data from one table to another table using javascript or jquery
Step 1 : In table 1st table i want to copy table row the 2nd table, when click on the "copy" button after inputting the value in input text field.(value should be copied instead of input text field)第 1 步:在第 1 个表中,我想复制第 2 个表中的表行,当在输入文本字段中输入值后单击“复制”按钮时。(应复制值而不是输入文本字段)
Step 2 : After click on the "copy" button the button should be change to "Undo" to remove the table row from 2nd table.第 2 步:单击“复制”按钮后,按钮应更改为“撤消”以从第二个表格中删除表格行。
Step 3 : after deleting the row from 2nd table the button should be changed again to "copy" button with step 1 functionality in table 1.第 3 步:从第二个表中删除行后,按钮应再次更改为“复制”按钮,具有表 1 中的第 1 步功能。
Step 4 : the copied row in 2nd table should have "Delete" button.When click on the delete button the row should be deleted from 2nd table and the button should be changed again to"copy" button with step 1 functionality in table 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 or codepen example will be very appriciated.Thanks in advance. jsfiddle 或 codepen 示例将非常有用。提前致谢。
not exactly what you wanted but might give you the idea.不完全是你想要的,但可能会给你这个想法。
$(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()
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.