带复选框的过滤器表

我正在用复选框过滤表格。我的代码在某些方面工作正常。带复选框的过滤器表

我希望它过滤结果，如果他们符合所有的检查，而不是一个。

基于：How can I add to my table filter to allow for multiple checkbox selections, as well as filtering from a dropdown?

$("input[name='filterStatus'], select.filter").change(function() { 
 
    var classes = []; 
 
    var stateClass = "" 
 

 
    $("input[name='filterStatus']").each(function() { 
 
    if ($(this).is(":checked")) { 
 
     classes.push('.' + $(this).val()); 
 
    } 
 
    }); 
 

 
    if (classes == "" && stateClass == "") { 
 
    // if no filters selected, show all items 
 
    $("#StatusTable tbody tr").show(); 
 
    } else { 
 
    // otherwise, hide everything... 
 
    $("#StatusTable tbody tr").hide(); 
 

 
    // then show only the matching items 
 
    rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*'); 
 
    if (rows.size() > 0) { 
 
     rows.show(); 
 
    } 
 
    } 
 

 
});

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <form name="FilterForm" id="FilterForm" action="" method=""> 
 
    <input type="checkbox" name="filterStatus" value="ISO " /> 
 
    <label for="filter_1">ISO</label> 
 
    <input type="checkbox" name="filterStatus" value="AMCA" /> 
 
    <label for="filter_2">AMCA</label> 
 
    <input type="checkbox" name="filterStatus" value="UL" /> 
 
    <label for="filter_3">UL</label> 
 
    </form> 
 

 
    <table border="1" id="StatusTable"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>ISO</th> 
 
     <th>AMCA</th> 
 
     <th>UL</th> 
 
     </tr> 
 
     <tbody> 
 
     <tr class="ISO"> 
 
      <td class="Name">Name1</td> 
 
      <td class="ISO">&#x2713;</td> 
 
      <td class="AMCA">&nbsp;</td> 
 
      <td class="UL">&nbsp;</td> 
 
     </tr> 
 
     <tr class="ISO AMCA"> 
 
      <td class="Name">Name2</td> 
 
      <td class="ISO">&#x2713;</td> 
 
      <td class="AMCA">&#x2713;</td> 
 
      <td class="UL">&nbsp;</td> 
 
     </tr> 
 
     <tr class="ISO AMCA UL"> 
 
      <td class="Name">Name3</td> 
 
      <td class="ISO">&#x2713;</td> 
 
      <td class="AMCA">&#x2713;</td> 
 
      <td class="UL">&#x2713;</td> 
 
     </tr> 
 

 
     </tbody> 
 
    </table> 
 
    <script></script> 
 
</body> 
 

 
</html>

来源

2015-04-30 mHenderson

如果你创建了一个小提琴或发布的代码到你的例子你的问题会更容易为他人提供帮助。 – McWayWeb

该行是否总是包含正确的单元格列表？ – j08691

是的，我可以分配行类 – mHenderson

修改您的jQuery它遍历每一行。创建标记变量以存储是否显示该行，并将其设置为true默认情况下。

现在，当你循环遍历每一行时，你也将遍历每一个你正在检查的类。如果在任何时候，循环测试失败，请将您的show变量设置为false以保持行隐藏。

$("input[name='filterStatus']").change(function() { 
 
    var classes = []; 
 

 
    $("input[name='filterStatus']").each(function() { 
 
     if ($(this).is(":checked")) { classes.push('.' + $(this).val()); } 
 
    }); 
 

 
    if (classes == "") { // if no filters selected, show all items 
 
     $("#StatusTable tbody tr").show(); 
 
    } else { // otherwise, hide everything... 
 
     $("#StatusTable tbody tr").hide(); 
 

 
     $("#StatusTable tr").each(function() { 
 
      var show = true; 
 
      var row = $(this); 
 
      classes.forEach(function (className) { 
 
       if (row.find('td' + className).html() == '&nbsp;') { show = false; } 
 
      }); 
 
      if (show) { row.show(); } 
 
     }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    </head> 
 
    
 
    <body> 
 
     <form name="FilterForm" id="FilterForm" action="" method=""> 
 
      <input type="checkbox" name="filterStatus" value="ISO " /> 
 
      <label for="filter_1">ISO</label> 
 
      <input type="checkbox" name="filterStatus" value="AMCA" /> 
 
      <label for="filter_2">AMCA</label> 
 
      <input type="checkbox" name="filterStatus" value="UL" /> 
 
      <label for="filter_3">UL</label> 
 
     </form> 
 
     <table border="1" id="StatusTable"> 
 
      <thead> 
 
       <tr> 
 
        <th>Name</th> 
 
        <th>ISO</th> 
 
        <th>AMCA</th> 
 
        <th>UL</th> 
 
       </tr> 
 
       <tbody> 
 
        <tr class="ISO"> 
 
         <td class="Name">Name1</td> 
 
         <td class="ISO">&#x2713;</td> 
 
         <td class="AMCA">&nbsp;</td> 
 
         <td class="UL">&nbsp;</td> 
 
        </tr> 
 
        <tr class="ISO AMCA"> 
 
         <td class="Name">Name2</td> 
 
         <td class="ISO">&#x2713;</td> 
 
         <td class="AMCA">&#x2713;</td> 
 
         <td class="UL">&nbsp;</td> 
 
        </tr> 
 
        <tr class="ISO AMCA UL"> 
 
         <td class="Name">Name3</td> 
 
         <td class="ISO">&#x2713;</td> 
 
         <td class="AMCA">&#x2713;</td> 
 
         <td class="UL">&#x2713;</td> 
 
        </tr> 
 
       </tbody> 
 
     </table> 
 
     <script></script> 
 
    </body> 
 

 
</html>

来源

2015-04-30 17:19:46 McWayWeb

工程很好谢谢 – mHenderson

演示：https://jsfiddle.net/erkaner/u12te5jb/

这里是我的解决方案

$("input[name='filterStatus']").change(function() { 

var count1 = $("input[name='filterStatus']:checked").length;//number of checked items 

$("#StatusTable>tbody> tr").each(function() {//for each row 
    var count2 = 0;//this is the count of td that has ✓ 
    var row = $(this);//the current row 
    $("input[name='filterStatus']:checked").each(function() {//for each checked item 
     var inputVal = $(this).val();//get the value, which is class of the corresponding td, see below 
     if (row.find('.' + inputVal).html().indexOf("✓") >= 0)//if the td that corresponds to the selected checkbox contains ✓ 
      count2++;//then increase 
    }); 

    if (count1 == count2) //if counts match 
     row.show();//then show 
    else 
     row.hide(); 
    }); 
});

来源

2015-04-30 17:28:49 renakre

我可以在小提琴中使用它。 http://lorencook.com/example/table-1.html 但是我的演示很糟糕 – mHenderson

你能不能将''部分移动到头部而不是身体部位？ – renakre

不，那不是谢谢 – mHenderson

回答

相关问题