I attempted to transfer a row value from one table to another and then back to the original table, but unfortunately, I was unable to find a solution.
$('#one tbody tr td input.checkbox').click(function() {
if ($(this).attr('checked')) {
var row = $(this).closest('tr').clone();
$('#two tbody').append(row);
$(this).closest('tr').remove();
}
});
$('#two tbody tr td input.checkbox').click(function() {
if ($(this).attr('checked')) {
var row = $(this).closest('tr').clone();
$('#one tbody').append(row);
$(this).closest('tr').remove();
}
});
$('button').on('click', function() {
$('*').removeAttr('style');
$('#one tbody tr td input.checkbox:not(:checked)').parent().css('border', 'red 1px dashed');
});table {
margin: 10px;
}
td {
padding: 5px;
background: lightblue;
}
button {
float: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<button>TEST SELECTOR!</button>
<table id="one">
<tbody>
<tr>
<td>Stupid</td>
<td>Flanders</td>
<td></td>
</tr>
<tr>
<td>Hi!</td>
<td>There!</td>
<td>
<input type="checkbox" class="checkbox">
<label>Check ME!</label>
</td>
</tr>
<tr>
<td>Ho!</td>
<td>There!</td>
<td>
<input type="checkbox" class="checkbox">
<label>Check ME!</label>
</td>
</tr>
<tr>
<td>Neighbor</td>
<td>eno!</td>
<td>
<input type="checkbox" class="checkbox">
<label>Check ME!</label>
</td>
</tr>
<tr>
<td>Okaly</td>
<td>Dokaly</td>
<td>
<input type="checkbox" class="checkbox">
<label>Check ME!</label>
</td>
</tr>
</tbody>
</table>
<table id="two">
<tbody>
<tr>
<td>Stupid</td>
<td>Flanders</td>
<td></td>
</tr>
</tbody>
</table>However, the current code only removes the checked row without returning it to the original table.
When I click on a row, it should be returned to the previous table.
Does anyone know how to properly move the row value back to its original location after transfer?
Any assistance in resolving this issue would be greatly appreciated.