javascript 过滤表复选框答案

【问题标题】：javascript filter table checkboxjavascript 过滤表复选框
【发布时间】：2021-10-29 18:58:40
【问题描述】：

我有以下代码。表格过滤值

问题：当取消选中所有过滤器并再次选中 1 2 时，它会显示所有值。

当检查时，我想仅显示 col1值= 1 em>和 col2值= 2 em>

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

结果#

我需要什么#

function filter(event, filterCol) {
  let element = event.target;
  let condt1 = document.getElementsByClassName(filterCol);
  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('.option2').forEach(input => input.addEventListener('input', ()=>filter(event,"check2")));
document.querySelectorAll('.option3').forEach(input => input.addEventListener('input', ()=>filter(event,"check3")));

<div id="input">
<label>Filter Number </label><br>
<label>1<input class="option1" type="checkbox" value="1" checked/></label>
<label>2<input class="option2" type="checkbox" value="2" checked/></label>
<label>3<input class="option3" type="checkbox" value="3" checked/></label>
</div><br>


<table id="listingTable">
  <tr>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </tr>
  <tr>
    <td class="check1">1</td>
    <td class="check2">4</td>
    <td class="check3">3</td>
  </tr>
   <tr>
    <td class="check1">1</td>
    <td class="check2">2</td>
    <td class="check3">5</td>
  </tr>
   <tr>
    <td class="check1">3</td>
    <td class="check2">2</td>
    <td class="check3">3</td>
  </tr>
   <tr>
    <td class="check1">2</td>
    <td class="check2">2</td>
    <td class="check3">3</td>
  </tr>
   <tr>
    <td class="check1">4</td>
    <td class="check2">6</td>
    <td class="check3">3</td>
  </tr>
 
</table>

对不起，我的英语不好，无法解释我需要什么，希望你能理解我的需要

谢谢。

【问题讨论】：

标签： javascript filter html-table

【解决方案1】：

我认为您想匹配所有三个复选框条件。然后，不要一次只查找一列，而是在选中复选框时过滤所有列。这是修改后的过滤功能。

    function filter() {
        let cb1 = document.getElementsByClassName('option1')[0];    
        let cb2 = document.getElementsByClassName('option2')[0]; 
        let cb3 = document.getElementsByClassName('option3')[0];  

        let filterArr = new Array(cb1, cb2, cb3);
        
        var allMatched = 1; // flag initially set to 1 - if condition does not match will be made 0
        
        var table = document.getElementById("listingTable");
        for (var i = 1, row; row = table.rows[i]; i++) {
           //iterate through rows
           //rows would be accessed using the "row" variable assigned in the for loop
           for (var j = 0, col; col = row.cells[j]; j++) {
             //iterate through columns
             //columns would be accessed using the "col" variable assigned in the for loop
             if (filterArr[j].checked && col.innerHTML.toLocaleUpperCase() !== filterArr[j].value) {
                allMatched = 0;
             }                 
           } 
           if(allMatched === 0) {
               row.style = "display:none";
           }
           else {
               row.style = "display:table-row";
           }
           console.log("---------------------");
        }            
    }

【讨论】：