How to add and remove table rows using checkboxes

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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' style="height: 21vh;">

       <table class="table table-hover" style="line-height: 7px;">

           <tbody>



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



           </tbody>



       </table>

 </div>

edited Nov 25 '18 at 9:46

Mehran

2001412

asked Nov 25 '18 at 6:51

Muhammad Adeel

add a comment |

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' style="height: 21vh;">

       <table class="table table-hover" style="line-height: 7px;">

           <tbody>



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



           </tbody>



       </table>

 </div>

edited Nov 25 '18 at 9:46

Mehran

2001412

asked Nov 25 '18 at 6:51

Muhammad Adeel

add a comment |

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' style="height: 21vh;">

       <table class="table table-hover" style="line-height: 7px;">

           <tbody>



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



           </tbody>



       </table>

 </div>

edited Nov 25 '18 at 9:46

Mehran

2001412

asked Nov 25 '18 at 6:51

Muhammad Adeel

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' style="height: 21vh;">

       <table class="table table-hover" style="line-height: 7px;">

           <tbody>



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



           </tbody>



       </table>

 </div>

php jquery

edited Nov 25 '18 at 9:46

Mehran

2001412

asked Nov 25 '18 at 6:51

Muhammad Adeel

edited Nov 25 '18 at 9:46

Mehran

2001412

asked Nov 25 '18 at 6:51

Muhammad Adeel

edited Nov 25 '18 at 9:46

Mehran

2001412

edited Nov 25 '18 at 9:46

Mehran

2001412

edited Nov 25 '18 at 9:46

Mehran

2001412

asked Nov 25 '18 at 6:51

Muhammad Adeel

asked Nov 25 '18 at 6:51

Muhammad Adeel

asked Nov 25 '18 at 6:51

Muhammad Adeel

add a comment |

1 Answer
1

active

oldest

votes

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

edited Nov 25 '18 at 9:26

answered Nov 25 '18 at 9:19

Gutelaunetyp

18010

thanks for your answer i have used$( this) selector now its working but another problem occurred when i uncheck second input the whole table become empty

– Muhammad Adeel
Nov 25 '18 at 14:47

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53465319%2fhow-to-add-and-remove-table-rows-using-checkboxes%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

edited Nov 25 '18 at 9:26

answered Nov 25 '18 at 9:19

Gutelaunetyp

18010

thanks for your answer i have used$( this) selector now its working but another problem occurred when i uncheck second input the whole table become empty

– Muhammad Adeel
Nov 25 '18 at 14:47

add a comment |

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

edited Nov 25 '18 at 9:26

answered Nov 25 '18 at 9:19

Gutelaunetyp

18010

thanks for your answer i have used$( this) selector now its working but another problem occurred when i uncheck second input the whole table become empty

– Muhammad Adeel
Nov 25 '18 at 14:47

add a comment |

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

edited Nov 25 '18 at 9:26

answered Nov 25 '18 at 9:19

Gutelaunetyp

18010

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

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

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

edited Nov 25 '18 at 9:26

answered Nov 25 '18 at 9:19

Gutelaunetyp

18010

edited Nov 25 '18 at 9:26

answered Nov 25 '18 at 9:19

Gutelaunetyp

18010

answered Nov 25 '18 at 9:19

Gutelaunetyp

18010

answered Nov 25 '18 at 9:19

Gutelaunetyp

18010

thanks for your answer i have used$( this) selector now its working but another problem occurred when i uncheck second input the whole table become empty

– Muhammad Adeel
Nov 25 '18 at 14:47

add a comment |

thanks for your answer i have used$( this) selector now its working but another problem occurred when i uncheck second input the whole table become empty

– Muhammad Adeel
Nov 25 '18 at 14:47

thanks for your answer i have used$( this) selector now its working but another problem occurred when i uncheck second input the whole table become empty

– Muhammad Adeel
Nov 25 '18 at 14:47

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk