如何在 jquery 中选中/取消选中复选框时在表中添加/删除 tr

Question

我想在选中/取消选中复选框时添加/删除表中的行。复选框和表具有相同的值。例如，如果复选框的值为 2 ，则表中特定行的值正好为 2 ，依此类推。

为了更好地澄清，如果选中值3复选框，它将在表中添加一个tr并显示2的值，如果取消选中值2复选框，它将删除包含值2的tr。

下面是我的代码。它适用于添加，但不适用于删除。有什么帮助吗？

<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();
    });
  }
});