javascript 筛选复选框列表 table

Question

我正在尝试将动态过滤器用作复选框列表。我遇到了如何根据复选框字段中选中的内容来检查所有列的问题。目的是只显示那些相应复选框被选中的行。然而 table 不是动态的并且不会改变

任何人都可以用我的代码提出建议吗？

感谢您的帮助。

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>

Answer 1

您的代码中存在一点逻辑错误，因为第二个 for 循环将覆盖第一个 for 循环所做的一切。我将您的功能更改为：“首先显示所有内容并根据复选框隐藏”。看看是不是你想要的结果。

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>

javascript 筛选复选框列表 table

javascript filter checkboxlist table

javascript

html-table

filter