チェックボックスがオフのときに2番目のテーブルから行を削除できません

Question

最初のテーブルからチェックボックスをオフにした場合、特定の行を削除できません。インデックス属性が機能していないようですelse部分 私は最初のテーブルから2番目に行をクローンしています。最初のテーブルの

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()を呼び出します。あなたは文句を言わないだけ$('tr').data('index')で$('tr').attr('data-index')を介してアクセスすることができるので、それは、HTML属性を設定していない - jQueryのことで、純粋に処理され行方不明data-index、.data()セットの背景データ用として

。

ニーズに応じて

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