纯 javascript 表格复选框过滤器

Question

带有复选框的表格过滤器值

我想匹配所有复选框条件。

问题：取消选中并再次选中时。它比较了最后一个值

示例：我取消选中机器人并重新选中 james 它不应该显示机器人

我需要什么#

function filter(event, filterCol) {
  let element = event.target;
  let condt1 = document.getElementsByClassName(filterCol);
  var table = document.getElementById("listingTable");
      
    for (let i = 0; i < condt1.length; i++) {
      if (condt1[i].innerHTML.toLocaleUpperCase() == element.value.toLocaleUpperCase()) {
        if (element.checked == true) {
           condt1[i].parentElement.closest('tr').style = "display:table-row"

        } else {
           condt1[i].parentElement.closest('tr').style = "display:none"
        }
      }

  }
}

document.querySelectorAll('.option1').forEach(input => input.addEventListener('input', ()=>filter(event,"check1")));
document.querySelectorAll('.option3').forEach(input => input.addEventListener('input', ()=>filter(event,"check3")));

<div id="input">
<label>Filter Name </label><br>
<label>Adison<input class="option1" type="checkbox" value="Adison" checked/></label>
<label>James<input class="option1" type="checkbox" value="James" checked/></label><br><br>

<label>Filter Race </label><br>
<label>human<input class="option3" type="checkbox" value="human" checked/></label>
<label>robot<input class="option3" 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">Adison</td>
    <td >Sweden</td>
    <td class="check3">robot</td>
  </tr>
   <tr>
    <td class="check1">Adison</td>
    <td >UK</td>
    <td class="check3">human</td>
  </tr>
   <tr>
    <td class="check1">James</td>
    <td >Sweden</td>
    <td class="check3">human</td>
  </tr>
   <tr>
    <td class="check1">James</td>
    <td>Germany</td>
    <td class="check3">robot</td>
  </tr>
   <tr>
    <td class="check1">Adison</td>
    <td>Italy</td>
    <td class="check3">robot</td>
  </tr>
 
</table>

或者我应该修改过滤器功能。任何人都可以建议我的代码吗？

谢谢。

Answer 1

发生这种情况的原因是您正在评估导致事件的元素是否已“检查”。在“詹姆斯”的情况下，当您检查时这是正确的。因此，根据您当前的逻辑，表格中包含“James”的每一列都将是可见的。要完成您想要的，您需要检查每个输入元素，而不仅仅是触发事件的那个。

如果复选框隐藏了隐藏行，您还必须确保不显示隐藏行。您的算法将单独打开和关闭每个复选框的可见性，而不是组合。通过为每一行而不是表中的每个单元格运行算法，您可以减轻这种情况并最终得到您想要的。

所以算法是： 循环遍历每一行 循环遍历每个复选框 循环遍历所有过滤的列 检查文本是否匹配复选框以及复选框是否未选中 隐藏行

像这样：

function filter(event, tableId, filterCol) {
    let checkboxes = document.getElementsByTagName("input");
    let rows = document.getElementById(tableId).getElementsByTagName("tr");
    for(let r = 0;r<rows.length;r++){
      let cols = rows[r].querySelectorAll(filterCol);
      rows[r].style = "display: table-row";
      for(let i = 0;i<checkboxes.length;i++){
        let value = checkboxes[i].value.toLocaleUpperCase();
        for(let c= 0; c<cols.length;c++){
          let cvalue = cols[c].innerText.toLocaleUpperCase();
          if(cvalue === value && checkboxes[i].checked === false){
            rows[r].style = "display: none";
          }
        }
      }
    }
  }
  
  document.querySelectorAll([".option1",".option3"]).forEach(input => input.addEventListener('input', ()=>filter(event,"listingTable",[".check1",".check3"])));

  <div id="input">
    <label>Filter Name </label><br>
    <label>Adison<input class="option1" type="checkbox" value="Adison" checked/></label>
    <label>James<input class="option1" type="checkbox" value="James" checked/></label><br><br>
    
    <label>Filter Race </label><br>
    <label>human<input class="option3" type="checkbox" value="human" checked/></label>
    <label>robot<input class="option3" 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">Adison</td>
    <td >Sweden</td>
    <td class="check3">robot</td>
  </tr>
   <tr>
    <td class="check1">Adison</td>
    <td >UK</td>
    <td class="check3">human</td>
  </tr>
   <tr>
    <td class="check1">James</td>
    <td >Sweden</td>
    <td class="check3">human</td>
  </tr>
   <tr>
    <td class="check1">James</td>
    <td>Germany</td>
    <td class="check3">robot</td>
  </tr>
   <tr>
    <td class="check1">Adison</td>
    <td>Italy</td>
    <td class="check3">robot</td>
  </tr>
 
</table>