纯 javascript table 复选框过滤器

Question

Table 使用复选框过滤值

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

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

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

我需要什么#

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”的情况下，当你检查它时，它是真的。因此，根据您当前的逻辑，table 中包含“James”的每一列都将可见。要完成您想要的，您需要检查每个输入元素，而不仅仅是触发事件的元素。

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

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

像这样：

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>

纯 javascript table 复选框过滤器

pure javascript table checkbox filter

javascript

checkbox

html-table

filter