Как починить фильтр таблиц?

Question

[yakamoto_r]

Имеется код с выборкой фильтров, одновременно можно поставить несколько позиций, фильтрация должна учитывать каждую выбранную позицию. То есть, если я выбираю "Яблоки" и цвет "Зеленый", я хочу, чтобы мне выводились ТОЛЬКО зеленые яблоки. А код, который я приложил, выводит ВСЕ яблоки и ВСЕ зеленые фрукты. Как связать выборку параметров фильтрации?

<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()
  });
});

Answer 1

[0xD34F]

Укажите нормальные атрибуты name для чекбоксов - соответствующие столбцам, по которым будет осуществляться фильтрация с использованием их значений. Т.е., color для первой группы, fruit для второй.

const table = document.querySelector('table');

const columnIndex = Object.fromEntries(Array.from(
  table.tHead.rows[0].cells,
  n => [ n.innerText.toLowerCase(), n.cellIndex ]
));

function onChange() {
  const filters = Object.entries(Array.prototype.reduce.call(
    document.querySelectorAll('.list-group :checked'),
    (acc, n) => ((acc[columnIndex[n.name]] ??= []).push(n.value), acc),
    {}
  ));

  for (const { rows } of table.tBodies) {
    for (const tr of rows) {
      tr.hidden = filters.some(n => !n[1].includes(tr.cells[n[0]].innerText));
    }
  }
}

document.querySelectorAll('.list-group').forEach(n => {
  n.addEventListener('change', onChange);
});