Объеденение двух фильтров JavaScript

На Js работает два фильтра для html таблицы. Первый:

    $(function() {
      //name part
      $("#name").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#my-table").find('tr').filter(function() {
          $(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
        });
      });


      $("#from,#to").bind('keyup change', function() {

        var val1 = moment($('#from').val().toLowerCase(), 'DD.MM.YYYY');
        var val2 = moment($('#to').val().toLowerCase(), 'DD.MM.YYYY');

        $("#my-table").find('tr').filter(function() {
          $(this).toggle((moment($(this).find('td').text().toLowerCase(),
            'DD.MM.YYYY') >= (val1) || !val1["_isValid"]) && (moment($(this).find('td').text()
            .toLowerCase(),
            'DD.MM.YYYY') <= (val2) || !val2["_isValid"]))
        });
        //console.log(val1["_isValid"], val2["_isValid"]);
      })


    });

Второй:

function filter_type(box) {
      var cbs = document.getElementsByTagName('input');
      var all_checked_types = [];
      for(var i=0; i < cbs.length; i++) {
        if(cbs[i].type == "checkbox") {
            if(cbs[i].name.match(/^filter/)) {
                if(cbs[i].checked) {
                  all_checked_types.push(cbs[i].value);
                 }
               }
            }
       }
      if (all_checked_types.length > 0) {
        $('#my-table tr').each(function (i, row) {
          var $tds = $(this).find('td')
          if ($tds.length) {
           var type = $tds[2].innerText;
           console.log(type)
           if(!(type && all_checked_types.indexOf(type) >= 0)) {
             $(this).hide();
            }
            else {
             $(this).show();
            }
           }
         });

       }
       else {
         $('#my-table tr').each(function (i, row) {
           var $tds = $(this).find('td'),
           type = $tds.eq(2).text();
           $(this).show();
          });
       }
       return true;
       
     }

Проблема заключается в том, что фильтрация происходит по последнему измененному фильтру. HTML:

<div class="container">
      Фильтр даты от: <input class="form-control" id="from" type="text"> до : <input class="form-control" id="to" type="text">
      <input class="form-control" id="name" type="text" placeholder="Поиск по ключевому слову">
    <table>
      <tr><td><input type='checkbox' onclick='return filter_type(this);' name='filter' id="Р1" value="Рецепт 1" />Рецепт 1"</td></tr>
      <tr><td><input type='checkbox' onclick='return filter_type(this);' name='filter' id="Р2" value="Рецепт 2" />Рецепт 2</td></tr>
      <tr><td><input type='checkbox' onclick='return filter_type(this);' name='filter' id="Р3" value="Рецепт 3" />Рецепт 3</td></tr>
    </table>
    <table>
      <thead>
        <tr><th onclick="sortTable(0)">Дата</th><th onclick="sortTable(1)"">Время</th><th onclick="sortTable(2)">Наименование рецепта</th><th onclick="sortTable(3)">Состояние</th><th onclick="sortTable(4)">Время наработки</th></tr>
      </thead>

      <tbody id="my-table" >
        <tr class="list-group"><td>06.01.2023</td><td>8:49:55</td><td>Рецепт 1</td><td>Включен</td><td>1</td></tr>
        <tr class="list-group"><td>06.01.2022</td><td>8:49:55</td><td>Рецепт 2</td><td>Включен</td><td>2</td></tr>
        <tr class="list-group"><td>06.01.2021</td><td>8:49:55</td><td>Рецепт 3</td><td>Включен</td><td>3</td></tr>
      </tbody>
    </table>
  </div>

Необходимо, что бы фильтрация происходила одновременно по двум фильтрам.


Ответы (0 шт):