如何使用javascript将内容从表格的一行移动到另一表格的行
[英]How to move content from one row of the table to another table row using javascript
问题描述
I have two tables.Table 1 and table 2.I want to copy one row content to another when click on the that row instead of button ,using java-script. 
我有两个表。表1和表2。我想使用java-script单击该行而不是按钮时，将一行内容复制到另一行。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("t1").clone().appendTo("t2"); }); }); </script> </head> <body> <table style="width:100%;border-style:dashed"> <tr1> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr1> </table> </br> <table style="width:100%;border-style:dashed"> <tr2> <th></th> <th></th> <th></th> </tr2> </table> <button>colne</button> </body> </html>
i will appreciate if codepen example be given. 如果能给出Codepen示例，我将不胜感激。
3 个解决方案
解决方案1
0 2016-08-27 16:19:07
解决方案2
0 2016-08-27 16:19:54
should be a simple matter of jquery dom manipulation, consider this: 应该是简单的jQuery dom操作问题，请考虑以下问题：
<table id="first-table">
<tbody>
<tr class="row-copier"><td>Content here</td><td>other content</td></tr>
<tr class="row-copier"><td>more content</td><td>second column</td></tr>
<tr class="row-copier"><td>...and something completely different</td><td><h1>YAY!</h1></td></tr>
</tbody>
</table>
<table id="second-table">
<tbody>
<tr><td>Result Table</td><td>where stuff will get copied</td></tr>
</tbody>
</table>
<script>
jQuery(function($) {
$('.row-copier').click(function() {
// select row-copier row, clone it, and append to second table body
$(this).clone().appendTo('#second-table>tbody');
});
});
</script>
the important bits are the clone operation to make a deep copy, and the appendTo to specify where the clone copy is being put. 重要的位是进行深拷贝的clone操作，以及appendTo指定将克隆拷贝放置在何处。 I edited the answer to reflect your desire to copy the row clicking anywhere on the row itself, so no links are required, nor a closest to get the row. 我编辑了答案，以反映您希望单击该行本身的任何位置来复制该行，因此不需要链接，也不需要closest链接即可获得该行。
good luck! 祝好运！
解决方案3
0 2016-08-27 17:48:00
$(document).ready(function() { var items = []; $("#myTable tr").on("click", function() { var newTr = $(this).closest("tr").clone(); var newButtonHTML = "<input type = 'button' value='Edit' onclick='Edit()' /><input type='button' value='Delete' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'/>"; $(newButtonHTML).children("button").click(function(e) { }); $(newTr).children("td:last").html("").html(newButtonHTML); items.push(newTr); newTr.appendTo($("#stopsTable")); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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>28.56137</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>28.56136</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>
Just see my code in this example .I think it will be help full for you and other friends. 只需在此示例中查看我的代码即可。我认为这对您和其他朋友会有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.