jqueryでチェックボックスが選択/選択解除されたときにテーブルにtrを追加/削除する方法

Question

チェックボックスを選択/選択解除するときにテーブルに行を追加/削除したいとします。チェックボックスとテーブルの値は同じです。たとえば、チェックボックスの値が2の場合、テーブルの特定の行は正確に2の値を持ちます。

はあなたが値3のチェックボックスを選択した場合、それは表にtrを追加し、2の値を表示し、あなたが値2のチェックボックスの選択を解除した場合、それはの値が含まれtrを削除しますので、より良い明確にするために、 2。

以下は私のコードです。追加のために機能しますが、削除には使用できません。どんな助け？

<table class="table table-hover table-striped" id="tbl"> 
    <tr> 
     <td>value of 1</td> 
    <tr> 
</table> 

<input type="checkbox" name="id" value="1"> 
<input type="checkbox" name="id" value="2"> 
<input type="checkbox" name="id" value="3"> 

$('input[type="checkbox"]').change(function(){ 
    if($(this).is(':checked')){ 
     $('#tbl').append('<tr><td>' + $this.val() + '</td></tr>'); 
    } else { 
     $('#tbl').find('<tr><td>' + $this.val() + '</td></tr>').remove(); 
    } 
}); 

Answer 1

それは取り除くために働くありません。しかし、あなたはただ<tr>要素を見つけることができません。私が正しくあなたを得るなら、このコードはうまくいくはずです。

$('input[type="checkbox"]').change(function() { 
    var val = $(this).val(); 
    if($(this).is(':checked')) { 
     var $tr = $('<tr />').attr('data-val', val); 
     var $td = $('<td><i class="fa fa-times" aria-hidden="true"></i></td>'); 

     $tr.append($td); 
     $('#tbl').append($tr); 
    } 
    else { 
     $('#tbl').find("[data-val='"+ val +"']").remove(); 
    } 

}); 

Answer 2

このチェック：

$('input[type="checkbox"]').change(function() { 
    var val = $(this).val(); 

    if ($(this).is(':checked')) { 
    // write the tr 
    $('#tbl').append('<tr><td>' + val + '</td></tr>'); 
    } 
    else { 
    // roll over each tr and check text 
    var alltr = $('#tbl').find('tr'); 
    $(alltr).each(function() { 

     if ($(this).text() == val) 
     $(this).remove(); 
    }); 
    } 
});