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

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

2 个答案: