Here is link https://jsfiddle.net/Palak_js/c8kq2q5d/4/
I am able to add row to other table but,I dont want checkbox to be copied along also when I set default checkbox to be checked it does not works fine. Is there any way I can remove checkbox from other table and by default set checkbox to checked and row gets deleted when checkbox is unchecked
$("#vergeTable input:checkbox.chkclass").click(function() {
if ($(this).is(":checked")) {
$(this).closest("tr").clone().appendTo("#vergeTable2");
} else {
var index = $(this).closest("tr").attr("data-index");
var findRow = $("#vergeTable2 tr[data-index='" + index + "']");
findRow.remove();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="pure-table dataTable table-bordered vergeTable rowClick" id="vergeTable" role="grid">
<thead>
<tr role="row">
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Navn</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Mandat</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Status</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Regnskapsplikt</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Dato startet</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Dato til</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Velg</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Alfred Psa Asker</td>
<td>Ivareta personens interesser innenfor det personlige og økonomiske området</td>
<td>
Tidligere
</td>
<td>Ordinær</td>
<td>10.07.2013</td>
<td>01.10.2016</td>
<td>
<input type="checkbox" class="chkclass" />
</td>
</tr>
<tr data-index="2">
<td>Testfirst Testlast</td>
<td>Ivareta personens interesser innenfor det personlige og økonomiske området</td>
<td>
Nåværende
</td>
<td>Ordinær</td>
<td>05.12.2016</td>
<td></td>
<td>
<input type="checkbox" class="chkclass" />
</td>
</tr>
</tbody>
</table>
<br>-----
<br>
<table class="pure-table dataTable table-bordered selectedVergeTable rowClick" id="vergeTable2" role="grid">
<thead>
<tr role="row">
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Navn</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Mandat</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Status</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Regnskapsplikt</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Dato startet</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Dato til</th>
</tr>
</thead>
<tbody>
</tbody>
</table>You should bind the change event instead of click and you need to remove it from clone object. change() or trigger('change') can be used to trigger the event handler on page load.
//Bind change event
$("#vergeTable input:checkbox.chkclass").change(function() {
if (this.checked) {
//Cache cloned object in a variable
var clone = $(this).closest("tr").clone();
//Remove checkbox
clone.find(':checkbox').remove()
//Append it
clone.appendTo("#vergeTable2");
} else {
var index = $(this).closest("tr").attr("data-index");
var findRow = $("#vergeTable2 tr[data-index='" + index + "']");
findRow.remove();
}
})
.change(); //<==== Trigger on page load
$("#vergeTable input:checkbox.chkclass").change(function() {
if (this.checked) {
//Cache cloned object in a variable
var clone = $(this).closest("tr").clone();
//Remove checkbox
clone.find(':checkbox').remove()
//Append it
clone.appendTo("#vergeTable2");
} else {
var index = $(this).closest("tr").attr("data-index");
var findRow = $("#vergeTable2 tr[data-index='" + index + "']");
findRow.remove();
}
}).change();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="pure-table dataTable table-bordered vergeTable rowClick" id="vergeTable" role="grid">
<thead>
<tr role="row">
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Navn</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Mandat</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Status</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Regnskapsplikt</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Dato startet</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Dato til</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Velg</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Alfred Psa Asker</td>
<td>Ivareta personens interesser innenfor det personlige og økonomiske området</td>
<td>
Tidligere
</td>
<td>Ordinær</td>
<td>10.07.2013</td>
<td>01.10.2016</td>
<td>
<input type="checkbox" class="chkclass" checked />
</td>
</tr>
<tr data-index="2">
<td>Testfirst Testlast</td>
<td>Ivareta personens interesser innenfor det personlige og økonomiske området</td>
<td>
Nåværende
</td>
<td>Ordinær</td>
<td>05.12.2016</td>
<td></td>
<td>
<input type="checkbox" class="chkclass" />
</td>
</tr>
</tbody>
</table>
<br>-----
<br>
<table class="pure-table dataTable table-bordered selectedVergeTable rowClick" id="vergeTable2" role="grid">
<thead>
<tr role="row">
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Navn</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Mandat</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Status</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Regnskapsplikt</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Dato startet</th>
<th align="left" class="sorting_disabled" rowspan="1" colspan="1">Dato til</th>
</tr>
</thead>
<tbody>
</tbody>
</table>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments