As a newcomer to stackoverflow, I am encountering an issue while working on two tables. There is a right button that should move the row into the next table, but unfortunately, my attempts to make it work have been unsuccessful.
I would greatly appreciate any assistance.
$(function() {
$(document).on("click", "#submit", function() {
var getSelectedRows = $(".src-table").parents("tr");
$(".target-table tbody").append(getSelectedRows);
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
Source table
</h3>
<table class="src-table">
<tr>
<th>Select</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<br>
<input type="button" value="Submit" id="submit">
<h3>
Target table
</h3>
<table class="target-table">
<tr>
<th>Select</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>