javascript filter checkboxlist table

Question

I am trying dynamic filter as checkboxlist. I'm having a trouble on how can I check all column based of what been checked in checkbox field. with the goal of showing only those rows whose corresponding checkbox is checked. However the table is not dynamic and does not change

Can anyone advise with my codes ?

Thanks for helping.

function filter() {
  let checkoption1 = document.getElementsByClassName("option1"); 
  let checkoption2 = document.getElementsByClassName("option2"); 
  
  let condt1 = document.getElementsByClassName("check1");
  let condt2 = document.getElementsByClassName("check2");

      
    for (let i = 0; i < condt1.length; i++) {
        for(let n = 0; n < checkoption1.length; n++)
      if (condt1[i].innerHTML.toLocaleUpperCase() == checkoption1[n].value.toLocaleUpperCase()) {
        if (checkoption1[n].checked == true) {
           condt1[i].parentElement.closest('tr').style = "display:table-row"
        } else {
           condt1[i].parentElement.closest('tr').style = "display:none"
        }
      }
  }
  
  
     for (let i = 0; i < condt2.length; i++) {
        for(let n = 0; n < checkoption2.length; n++)
      if (condt2[i].innerHTML.toLocaleUpperCase() == checkoption2[n].value.toLocaleUpperCase()) {
        if (checkoption2[n].checked == true) {
           condt2[i].parentElement.closest('tr').style = "display:table-row"
        } else {
           condt2[i].parentElement.closest('tr').style = "display:none"
        }
      }
  }
}

<div id="input">
<label>Filter Name </label><br>
<label>User<input onclick="filter()" id="User" class="option1" type="checkbox" value="User" checked/></label>
<label>Admin<input onclick="filter()" id="Admin" class="option1" type="checkbox" value="Admin" checked/></label><br><br>

<label>Filter Race </label><br>
<label>human<input onclick="filter()" class="option2" type="checkbox" value="human" checked/></label>
<label>robot<input onclick="filter()" class="option2" type="checkbox" value="robot" checked/></label>
</div><br>


<table id="listingTable">
  <tr>
    <th>Name</th>
    <th>Country</th>
    <th>Race</th>
  </tr>
  <tr>
    <td class="check1">Admin</td>
    <td >Sweden</td>
    <td class="check2">robot</td>
  </tr>
   <tr>
    <td class="check1">Admin</td>
    <td >UK</td>
    <td class="check2">human</td>
  </tr>
   <tr>
    <td class="check1">User</td>
    <td >Sweden</td>
    <td class="check2">human</td>
  </tr>
   <tr>
    <td class="check1">User</td>
    <td>Germany</td>
    <td class="check2">robot</td>
  </tr>
   <tr>
    <td class="check1">Admin</td>
    <td>Italy</td>
    <td class="check2">robot</td>
  </tr>
 
</table>

Y.T. · Accepted Answer · 2021-09-01 05:29:20Z

There is a little logic mistake in your code since the second for loop will override everything done by the first for loop. I changed your function to: "display everything first and hide according to checkboxes". See if it is your intended result.

function filter() {
  let checkoption1 = document.getElementsByClassName("option1"); 
  let checkoption2 = document.getElementsByClassName("option2"); 
  
  let condt1 = document.getElementsByClassName("check1");
  let condt2 = document.getElementsByClassName("check2");
  for (let i = 0; i < condt1.length; i++) {
      condt1[i].parentElement.closest('tr').style = "display:table-row"
  }
  for (let i = 0; i < condt1.length; i++) {
      for(let n = 0; n < checkoption1.length; n++)
    if (condt1[i].innerHTML.toLocaleUpperCase() == checkoption1[n].value.toLocaleUpperCase()) {
      if (!checkoption1[n].checked == true) {
         condt1[i].parentElement.closest('tr').style = "display:none"
      }
    }
  }
   for (let i = 0; i < condt2.length; i++) {
      for(let n = 0; n < checkoption2.length; n++)
    if (condt2[i].innerHTML.toLocaleUpperCase() == checkoption2[n].value.toLocaleUpperCase()) {
      if (!checkoption2[n].checked) {
         condt2[i].parentElement.closest('tr').style = "display:none"
      }
    }
  }
}

<div id="input">
<label>Filter Name </label><br>
<label>User<input onclick="filter()" id="User" class="option1" type="checkbox" value="User" checked/></label>
<label>Admin<input onclick="filter()" id="Admin" class="option1" type="checkbox" value="Admin" checked/></label><br><br>

<label>Filter Race </label><br>
<label>human<input onclick="filter()" class="option2" type="checkbox" value="human" checked/></label>
<label>robot<input onclick="filter()" class="option2" type="checkbox" value="robot" checked/></label>
</div><br>


<table id="listingTable">
  <tr>
    <th>Name</th>
    <th>Country</th>
    <th>Race</th>
  </tr>
  <tr>
    <td class="check1">Admin</td>
    <td >Sweden</td>
    <td class="check2">robot</td>
  </tr>
   <tr>
    <td class="check1">Admin</td>
    <td >UK</td>
    <td class="check2">human</td>
  </tr>
   <tr>
    <td class="check1">User</td>
    <td >Sweden</td>
    <td class="check2">human</td>
  </tr>
   <tr>
    <td class="check1">User</td>
    <td>Germany</td>
    <td class="check2">robot</td>
  </tr>
   <tr>
    <td class="check1">Admin</td>
    <td>Italy</td>
    <td class="check2">robot</td>
  </tr>
 
</table>

That work for me Thanks. in first loop you use condt1.length for check all table row Right ?
@Jaret Yes, you can do it with other ways. I am just too lazy. :)

Collectives™ on Stack Overflow

javascript filter checkboxlist table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related