How do I fix a table filter?

• 0
  Good day! Such a problem: there is a code with a selection of filters, you can put several positions at the same time, filtering must take into account each selected position. That is, if I select "Apples" and the color "Green", I want to display ONLY green apples. And the code I have attached displays ALL apples and ALL green fruits. How to link a selection of filtering options?
  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <ul class="list-group list-group-flush">
       <li class="list-group-item">
         <label class="container-box">green
            <input type="checkbox" class="name" name="name" value="green" />
            <span class="checkmark"></span>
         </label>
       </li>
       <li class="list-group-item">
         <label class="container-box">yellow
            <input type="checkbox" class="name" name="name" value="yellow" />
            <span class="checkmark"></span>
         </label>
       </li>
       <li class="list-group-item">
         <label class="container-box">red
            <input type="checkbox" class="name" name="name" value="red" />
            <span class="checkmark"></span>
         </label>
       </li>
   </ul>
    <ul class="list-group list-group-flush">
       <li class="list-group-item">
         <label class="container-box">apple
            <input type="checkbox" class="name" name="name" value="apple" />
            <span class="checkmark"></span>
         </label>
       </li>
       <li class="list-group-item">
         <label class="container-box">orange
            <input type="checkbox" class="name" name="name" value="orange" />
            <span class="checkmark"></span>
         </label>
       </li>
       <li class="list-group-item">
         <label class="container-box">mandarin
            <input type="checkbox" class="name" name="name" value="mandarin" />
            <span class="checkmark"></span>
         </label>
       </li>
   </ul>
   <table>
   <thead>
    <th>Color</th>
    <th>Fruit</th>
   </thead>
   <tbody id='myTable'>
    <tr>
     <td>green</td>
     <td>apple</td>
    </tr>
    <tr>
     <td>yellow</td>
     <td>orange</td>
    </tr>
    <tr>
     <td>red</td>
     <td>mandarin</td>
    </tr>
   </tbody>
  </table>

  
  
  

  $(document).ready(function(){
    $(".name").on("click", function() {
    name_list = []
    $("#myTable tr").hide()
    var flag = 1
    $("input:checkbox[name=name]:checked").each(function(){
          flag = 0;
          var value = $.trim($(this).val().toLowerCase());
          $("#myTable tr").filter(function() {
              if($.trim($(this).text().toLowerCase().indexOf(value)) > -1)
                  $(this).show()
          });
       });
      if(flag == 1)
          $("#myTable tr").show()
    });
  });

  JavaScript Anonymous, Sep 2, 2019

---

1 Answers
• 0
  Specify the normal name attributes for checkboxes - corresponding to the columns that will be filtered using their values. That is, color for the first group, fruit for the second.
  
  
  
  

  const columnIndex = {
  
    color: 0,
  
    fruit: 1,
  
  };
  
  
  
  function filter() {
  
    const filters = Object.entries(Array
  
      .from(document.querySelectorAll('.list-group :checked'))
  
      .reduce((acc, n) => ((acc[n.name] ||= []).push(n.value), acc), {})
  
    );
  
  
  
    document.querySelectorAll('table tbody tr').forEach(n => {
  
      n.hidden = filters.some(([ k, v ]) => !v.includes(n.cells[columnIndex[k]].innerText));
  
    });
  
  }
  
  
  
  
  
  document.querySelectorAll('.list-group').forEach(n => n.addEventListener('change', filter));

  Charles Strickland

---