將行從一個表復制到另一個表，而不復制復選框

Question

這是鏈接https://jsfiddle.net/Palak_js/c8kq2q5d/4/

我可以將行添加到其他表，但是，當我設置要檢查的默認復選框時，我也不想同時復制復選框。 有什么方法可以從其他表中刪除復選框，並且默認情況下將復選框設置為選中狀態，而當未選中復選框時行將被刪除

 $("#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> 

Answer 1

您應該綁定change事件而不是click並且需要將其從克隆對象中刪除。 change()或trigger('change')可用於在頁面加載時觸發事件處理程序。

//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> 

更新小提琴