javascript - 将行从一个表复制到另一个表而不复制复选框

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

您应该绑定(bind) 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>

Updated Fiddle