使用复选框过滤表格答案

【问题标题】：Use of checkboxes to filter a table使用复选框过滤表格
【发布时间】：2020-04-13 06:21:03
【问题描述】：

我的表格有任何间隙，例如“1st-4th”，需要根据复选框进行过滤。过滤器是应该对具有该值所属范围的行进行排序的值。例如，第 5 个过滤器应保留具有 2nd-7th、2nd-5th、3rd-6th 等值的行。我有一个将字符串 2nd-5th 转换为 [2,3,4,5] 的想法。并将此数组设置为每一行的属性。但我不知道如何通过比较和过滤进行搜索。
如何发展这个想法或找到更简单更好的方法？

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>
  <form name="FilterForm" id="FilterForm" action="" method="">
    <input type="checkbox" name="filterStatus" value="1st" />
    <label for="filter_1">1st</label>
    <input type="checkbox" name="filterStatus" value="2nd" />
    <label for="filter_2">2nd</label>
    <input type="checkbox" name="filterStatus" value="3rd" />
    <label for="filter_3">3rd</label>
     <input type="checkbox" name="filterStatus" value="4th" />
    <label for="filter_4">4th</label>
    <input type="checkbox" name="filterStatus" value="5th" />
    <label for="filter_5">5th</label>
  </form>

  <table border="3">
    <thead>
      <tr>
        <th>Name</th>
        <th>Class</th>
      </tr>
      <tbody>
        <tr>
          <td>Name1</td>
          <td>2nd-7th</td>
        </tr>
        <tr>
          <td class="Name">Name2</td>
          <td>1st-3rd</td>
        </tr>
        <tr>
          <td class="Name">Name3</td>
          <td>2nd-5th</td>
        </tr>
        <tr>
          <td class="Name">Name3</td>
          <td>1st-4th</td>
        </tr>
        <tr>
          <td class="Name">Name3</td>
          <td>3rd-6th</td>
        </tr>
      </tbody>
  </table>
</body>

</html>

【问题讨论】：

一旦你生成了一个值数组，使用这里的文档中的过滤器：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： jquery html

【解决方案1】：

以后最好提供Minimal, Reproducible Examples。请注意types of questions you should avoid asking。

这是一个例子。它可能比您预期的要复杂。

$(function() {
  function detectRange(str) {
    var parts = str.split("-");
    return [parseInt(parts[0]), parseInt(parts[1])];
  }

  function inRange(n, r) {
    var i = r[0];
    var result = false;
    for (i; i <= r[1]; i++) {
      if (n == i) {
        result = true;
      }
    }
    return result;
  }

  function filterRows(fObj, tObj) {
    var rows = $("tbody > tr", tObj);
    rows.show();
    if ($(":checked", fObj).length == 0 || $(":checked", fObj).length == $("input[type='checkbox']", fObj)) {
      return;
    }
    var filter = [],
      range;
    $(":checked", fObj).each(function(i, el) {
      filter.push(parseInt($(el).val()));
    });
    rows.each(function(i, r) {
      range = detectRange($("td:last", r).text().trim());
      var hit = 0;
      $.each(filter, function(j, f) {
        if (inRange(f, range)) {
          hit++;
        }
      });
      if (hit == 0) {
        $(r).hide();
      }
    });
  }

  $("#FilterForm input[type='checkbox']").click(function() {
    filterRows($(this).parent(), $("table"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="FilterForm" id="FilterForm" action="" method="">
  <input type="checkbox" name="filterStatus" value="1st" />
  <label for="filter_1">1st</label>
  <input type="checkbox" name="filterStatus" value="2nd" />
  <label for="filter_2">2nd</label>
  <input type="checkbox" name="filterStatus" value="3rd" />
  <label for="filter_3">3rd</label>
  <input type="checkbox" name="filterStatus" value="4th" />
  <label for="filter_4">4th</label>
  <input type="checkbox" name="filterStatus" value="5th" />
  <label for="filter_5">5th</label>
</form>

<table border="3">
  <thead>
    <tr>
      <th>Name</th>
      <th>Class</th>
    </tr>
    <tbody>
      <tr>
        <td>Name1</td>
        <td>2nd-7th</td>
      </tr>
      <tr>
        <td class="Name">Name2</td>
        <td>1st-3rd</td>
      </tr>
      <tr>
        <td class="Name">Name3</td>
        <td>2nd-5th</td>
      </tr>
      <tr>
        <td class="Name">Name3</td>
        <td>1st-4th</td>
      </tr>
      <tr>
        <td class="Name">Name3</td>
        <td>3rd-6th</td>
      </tr>
    </tbody>
</table>

【讨论】：