How to move content from one row of the table to another table row using javascript
Question
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.
<!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.
3 answers
solution1
0 2016-08-27 16:19:07
solution2
0 2016-08-27 16:19:54
should be a simple matter of jquery dom manipulation, consider this:
<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. 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.
good luck!
solution3
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.