javascript - 未选中复选框时无法从第二个表中删除行

Question

当第一个表中的复选框未选中时，我无法删除特定行。似乎索引属性在其他部分不起作用 我正在将行从第一个表克隆到第二个表。

第一个表的 html:

<table id="vergeTable" class="pure-table dataTable table-bordered vergeTable rowClick" role="grid">
   <thead>
      <tr role="row">
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Navn</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Mandat</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Status</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Regnskapsplikt</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Dato startet</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Dato til</th>
         <th class="sorting_disabled" rowspan="1" colspan="1" align="left">Velg</th>
      </tr>
   </thead>
   <tbody>
      <tr class="odd" role="row">
         <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 class="contentCenter">
            <input id="regnskapVerge0" class="transForm1Dot5 valgtVerge" name="regnskap.regnskapVerge[0].velgVerge" value="true" checked="checked" type="checkbox">
            <input name="_regnskap.regnskapVerge[0].velgVerge" value="on" type="hidden">
         </td>
      </tr>
      <tr class="odd vergeDetailRow" role="row">
   </tbody>
</table>

第二个表的 html:

<table id="vergeTable2" class="pure-table dataTable table-bordered vergeTable rowClick" role="grid">
   <thead>
   <tbody>
      <tr class="message2" style="display: none;">
      <tr class="odd vergeDetailRow" role="row">
         <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>
      </tr>
      <tr class="odd vergeDetailRow" role="row">
   </tbody>
</table>

这是js代码:

popuateFinalVergeTable: function(e) {
    $("#vergeTable input:checkbox.valgtVerge").change(function() {
        if (this.checked) {
            $(".message2").hide();
            //Cache cloned object in a variable
            var clone = $(this).closest("tr").clone();
            //Remove checkbox
            clone.find('td').eq(6).remove();
            //Append it
            clone.appendTo("#vergeTable2");
        } else {
            var index = $(this).closest("tr").attr("data-index");
            var findRow = $("#vergeTable2 tr[data-index='" + index + "']");
            findRow.remove();
            var checks = $('#vergeTable').find(':checked').length;
            if (!checks) {
                $(".message2").show();
            }
        }
    }).change();
 },

Answer 1

我不明白为什么你应该在更改事件监听器之后调用 .change() 。

至于缺少的data-index，.data()设置纯粹由jQuery处理的后台数据 - 它不设置HTML属性，所以你不会可以通过 $('tr').attr('data-index') 访问它，但只能使用 $('tr').data('index') 。

查看此代码并根据您的需要进行编辑

$("#table1 input:checkbox").change(function () {
    if ($(this).prop('checked')) {
        var clone = $(this).closest("tr").clone();
        clone.find('td').eq(1).remove();
        clone.appendTo("#table2");
    } else {
        var index = $(this).closest("tr").attr("data-pk");
        $("#table2 tr[data-pk='" + index + "']").remove();
    }
}); 

看看这个 fiddle https://jsfiddle.net/sj08fk7z/