未選中複選框時，無法從第二個表中刪除行

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()。

至於由純粹的jQuery處理失蹤data-index，.data()套後臺數據 - 它不設置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(); 
    } 
}); 

看看這個小提琴https://jsfiddle.net/sj08fk7z/