如何使用复选框添加和删除表格行答案

【问题标题】：How to add and remove table rows using checkboxes如何使用复选框添加和删除表格行
【发布时间】：2019-04-27 03:58:55
【问题描述】：

问题出在我已经成功编写了在选中复选框上添加和删除行的代码，但它仅适用于第一个元素。
就像当我单击第一个元素时，它会添加一行并在取消选中它时第二次删除该行，当我选中并取消选中第二个复选框时，它会在选中时添加一行并在未选中时删除行。

这里是jquery代码

<script type="text/javascript">
    $(document).ready(
        function () {
            $('.finding').change(
                function () {
                    if ($('.finding').is(':checked')) {
                        var finding = $(this).next('label').text();

                        $('#findings-table').append("<tr><td>"+finding+"</td></tr>");
                    }
                    else {
                        $('#findings-table').empty();
                    }

                });

        });
</script>

这是我得到复选框的 php 代码

if ($checkResult > 0) {


for ($i=0; $i < $checkResult ; $i++) { 

    $result = mysqli_fetch_assoc($query);

    $findings = $result['name'];

    $count = 1 + $i;
 echo"<tr>
        <th scope='row'>$count</th>
        <td scope='col'>
        <div class='input-group'>
          <input class='finding form-check-input' type='checkbox' name='findings[]' value='$findings'>
          <label class='input-label pt-1 px-3'>$findings</label>
        </div>
        </td>
    </tr>";
}

}

最后是我的 html 代码，其中出现了复选框

<div class='table-container' style="height: 21vh;">
       <table class="table table-hover" style="line-height: 7px;">
           <tbody>

              <?php include 'getfindings.php'; ?>

           </tbody>

       </table>
 </div>

【问题讨论】：

标签： php jquery

【解决方案1】：

我不知道#findings-table 是什么，因此我只是创建了一个表。

看这个：

$(function() {
  $('.finding').on('change', function(e) {
    var $this = $(e.currentTarget),
      $findingTable = $('#findings-table'),
      labelText = $this.parents('.input-group').find('.input-label').text();


    if ($this.is(':checked')) {
      $findingTable.append($('<tr/>').append($('<td/>').text(labelText)));
    } else {
      $findingTable.empty();
    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="findings-table"></table>
<div class='table-container' style="height: 21vh;">
  <table class="table table-hover" style="line-height: 7px;">
    <tbody>

      <tr>
        <th scope='row'>1</th>
        <td scope='col'>
          <div class='input-group'>
            <input class='finding form-check-input' type='checkbox' name='findings[]' value='a'>
            <label class='input-label pt-1 px-3'>nice a</label>
          </div>
        </td>
      </tr>
      <tr>
        <th scope='row'>2</th>
        <td scope='col'>
          <div class='input-group'>
            <input class='finding form-check-input' type='checkbox' name='findings[]' value='b'>
            <label class='input-label pt-1 px-3'>nice b</label>
          </div>
        </td>
      </tr>
      <tr>
        <th scope='row'>3</th>
        <td scope='col'>
          <div class='input-group'>
            <input class='finding form-check-input' type='checkbox' name='findings[]' value='c'>
            <label class='input-label pt-1 px-3'>nice c</label>
          </div>
        </td>
      </tr>
      <tr>
        <th scope='row'>4</th>
        <td scope='col'>
          <div class='input-group'>
            <input class='finding form-check-input' type='checkbox' name='findings[]' value='d'>
            <label class='input-label pt-1 px-3'>nice d</label>
          </div>
        </td>
      </tr>

    </tbody>

  </table>
</div>

【讨论】：

感谢您的回答，我已经使用$(this) 选择器现在可以正常工作，但是当我取消选中第二个输入时出现另一个问题，整个表格都变空了