Использование флажков для фильтрации таблицы - PullRequest
Новая
       0

Использование флажков для фильтрации таблицы

0 голосов
/ 13 апреля 2020


У меня есть таблица с любыми пробелами, такими как "1-й-4-й", которые необходимо отфильтровать на основе флажков. Фильтры - это значения, которые должны сортировать строки с диапазонами, в которые попадает значение. Например, 5-й фильтр должен оставлять строки со значениями, такими как 2-7, 2-5, 3-6. У меня есть идея преобразовать строки 2-5 в [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>

1 Ответ

0 голосов
/ 13 апреля 2020

В будущем лучше всего предоставить Минимальные воспроизводимые примеры . Пожалуйста, помните о типах вопросов, которые вам следует избегать .

Вот пример. Это может быть сложнее, чем вы ожидали. 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...