Reputation: 121
I have tried to move a row value to another table and back to the previous table, but I could not 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>
But, it's just removed the checked row only, it does not back to the previous.
If I clicked the row, it should back to the previous table.
How can I redo the row value from where I get it?
It will be appreciated, if help to solve this.
Upvotes: 2
Views: 2144
Reputation: 32354
try:
$('body').on('click','#one tbody tr td input.checkbox',function(){
if( $(this).attr('checked')){
var row = $(this).closest('tr').clone();
$('#two tbody').append(row);
$(this).closest('tr').remove();
}
});
$('body').on('click','#two tbody tr td input.checkbox',function(){
console.log('cc')
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');
});
jsfiddle:http://jsfiddle.net/wGGDb/76/
Upvotes: 2
Reputation: 24001
after clone , append and Redo .. you need to use
$('body').on('click','#one tbody tr td input.checkbox', function(){})
$('body').on('click','#two tbody tr td input.checkbox', function(){})
for both of #one and #two
Upvotes: 3