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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!