在html表上应用多个过滤器（jquery）

Question

我想将两个过滤器一起应用于 HTML 表格。一个是一个复选框，它将隐藏包含“无评级”的行。另一个是文本过滤器，它在用户输入文本时过滤（隐藏/显示）行。这是两个过滤器的代码

$(document).ready(function () {

    $('#hideRows').change(function () {
        $('#indexTable tr:contains("No Ratings")').toggle(!this.checked);
    })

    $("#filterRow").keyup(function () {
        var value = this.value.toLowerCase().trim();

        $("#indexTable tr").each(function (index) {
            if (!index) return;
            $(this).find("td.searchable").each(function () {
                var id = $(this).text().toLowerCase().trim();
                var not_found = (id.indexOf(value) == -1);
                $(this).closest('tr').toggle(!not_found);
                return not_found;
            });
        });
    });
});

我试图让这些过滤器协同工作，而不是独立工作。例如，如果用户选中 hideRows 复选框，则文本过滤器将仅过滤应用第一个过滤器的行，反之亦然。我已经看到创建一个主过滤器功能可能是解决方案，但我在尝试实现它时遇到了麻烦。

Answer 1

根据您的代码：

$(document).ready(function(){

  $('#hideRows').change(function () {
      var isChecked = !this.checked;

      $("#indexTable tr td:contains('No Ratings')").each(function(index, element){
          $(this).parent("tr").toggleClass("hide");
      });
  });

  $("#filterRow").keyup(function () {
      var value = this.value.toLowerCase().trim();

      $("#indexTable tr").not(".hide").each(function (index) {
          if (!index) return;
          $(this).find("td.searchable").each(function () {
              var id = $(this).text().toLowerCase().trim();
              var not_found = (id.indexOf(value) == -1);
              $(this).closest('tr').toggle(!not_found);
              return not_found;
          });
      });
  });


});

.hide{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="indexTable">
    <thead>
    <tr>
        <th>Fruit</th>
        <th>Rating</th>
        <th>Color</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="searchable">Apple</td>
        <td>5</td>
        <td>Red</td>
    </tr>
    <tr>
        <td class="searchable">Banana</td>
        <td>1</td>
        <td>Yellow</td>
    </tr>
    <tr>
        <td class="searchable">Orange</td>
        <td>No Ratings</td>
        <td>Orange</td>
    </tr>
    <tr>
        <td class="searchable">Grape</td>
        <td>3</td>
        <td>Purple</td>
    </tr>
    <tr>
        <td class="searchable">Berry</td>
        <td>No Ratings</td>
        <td>Purple</td>
    </tr>
    </tbody>
</table>

<input type="checkbox" name="" id="hideRows"> hideRows

<input type="text" name="" id="filterRow" placeholder="filter">