php - How to add and remove table rows using checkboxes

360

The problem is here that I have successfully written the code to add and remove row on checked checkbox but it only works for the first element.
Like when I click on the first element it adds a row and on unchecking it remove that row second time when I check and uncheck the second checkbox it adds a row on checked and removes row on unchecked.

here is jquery code

<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>

here is php code i'm getting checkboxes

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>";
}

}

and finally here is my html code where checkboxes appear

<div class='table-container' >
    <table >
      <tbody>

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

      </tbody>

    </table>
 </div>

123

Answer

Solution:

I could not figure out what #findings-table is, therefor I just created a table.

See this:

$(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' >
 <table >
  <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>

Write your answer

Share solution ↓

Additional Information:

Date the issue was resolved:

2022-10-17

Link To Source
Link To Answer People are also looking for solutions of the problem: you must enable the openssl extension in your php.ini to load information from https://repo.packagist.org

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question