how to hide a table row when checkbox is not checked

Question

I`d like the tablerow to disappear when I uncheck the checkbox. It must be only JavaScript based (exercise for school).

The creating of the checkbox works, but i cannot style the display to "none"

There are more TR's but i've deleted most of them since it gives no added value to solving the code below.

 // Get parent of checkbox var searchTr = document.querySelectorAll("#searchTable tr"); // add checkbox to parent for (i = 1; i < searchTr.length; i++) { var chkbox = document.createElement("input"); chkbox.type = "checkbox"; chkbox.setAttribute("class", "chkbox"); searchTr[i].appendChild(chkbox); chkbox.checked = true; chkbox.addEventListener("change", hideMe); function hideMe() { searchTr[i].style.display = "none"; } } 

 <table id="searchTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th class="th-sm">Name </th> <th class="th-sm">Position </th> <th class="th-sm">Office </th> <th class="th-sm">Age </th> <th class="th-sm">Start date </th> <th class="th-sm">Salary </th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> 

Answer 1

Please check the below JsFiddle: https://jsfiddle.net/ulric_469/v0taLbpr/4/

First of all code is not properly given, there is extra piece of div. Each time you run the for look you are getting the last value of i. In your case it is 3. So whenever you click on checkbox it will search the array having position 3. So you are getting error.

Please find the JS code:

var searchTr = document.querySelectorAll("#searchTable tr");

           // add checkbox to parent

            for (i = 1; i < searchTr.length; i++) {

                var chkbox = document.createElement("input");
                chkbox.type = "checkbox";
                chkbox.setAttribute("class", "chkbox");
                searchTr[i].appendChild(chkbox);
                chkbox.checked = true;
                chkbox.addEventListener("change",hideMe.bind(this, i));

            }
              function hideMe(i){
                  searchTr[i].style.display = "none";

              }

Answer 2

Take hideMe function out of the loop.

for (i = 1; i < searchTr.length; i++) {
    var chkbox = document.createElement("input");
    chkbox.type = "checkbox";
    chkbox.setAttribute("class", "chkbox");
    chkbox.setAttribute("id", i);
    searchTr[i].appendChild(chkbox);
    chkbox.checked = true;
    chkbox.addEventListener("change",hideMe);
}

function hideMe(){
    searchTr[this.id].style.display = "none";
}

Assign id attribute while creating the checkbox and use same id as an index while hiding.

Answer 3

fiddle: https://codepen.io/anon/pen/zQbMzR?editors=1010

add event listener:

chkbox.addEventListener("change",hideMe);

event handler:

function hideMe(e){ e.target.closest('tr').style.display = "none"; }

e.target is clicked element(checkbox), and .closest('tr') give the closest tr parent to you.

Answer 4

Wrap the table in a form and have the form listen for any change events that happen on any checkbox. Also each checkbox needs to be in a <td> it's invalid HTML to have anything that's not a <td> or <th> as a child of a <tr> . In the callback use e.target which always points to the origin of event (ie the tag clicked or changed by user).

 // Get parent of checkbox var searchTr = document.querySelectorAll("#searchTable tr"); // add checkbox to parent for (let i = 1; i < searchTr.length; i++) { var chkbox = document.createElement("input"); var cell = searchTr[i].insertCell(); chkbox.type = "checkbox"; chkbox.classList.add("chkbox"); chkbox.checked = true; cell.appendChild(chkbox); } document.querySelector("#ui").addEventListener('change', hide); function hide(e) { e.target.closest('tr').classList.add('hide'); } 

 .hide { visibility: collapse } 

 <form id='ui'> <table id="searchTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th class="th-sm">Name </th> <th class="th-sm">Position </th> <th class="th-sm">Office </th> <th class="th-sm">Age </th> <th class="th-sm">Start date </th> <th class="th-sm">Salary </th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> </form>