Как сделать jquery систему с несколькими фильтрами для каждого столбца таблицы - PullRequest
Новая
       21

Как сделать jquery систему с несколькими фильтрами для каждого столбца таблицы

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

Мне нужно сделать систему с несколькими фильтрами в jquery, но я должен убедиться, что текст, который я введу в текстовое поле, равен элементу из таблицы. Например, если я ввожу имя, Джон, мне нужны все строки в таблице с именем студента Джон. Если я напишу Джо, мне нужны только строки с именем студента Джо. И мне нужно применить несколько фильтров.

Что я пробовал 

$(document).ready(function() {
  $("#filter").click(function() {
    var value = $("#myInput").val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    td,
    th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    
    tr:nth-child(even) {
      background-color: #dddddd;
    }
  </style>
</head>

<body>
  <input id="myInput" type="text" placeholder="Search..">
  <button id="filter" type="button" name="filter">Sumbit</button>
  <br><br>

  <table>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Kim</td>
        <td>Moe</td>
        <td>kim@example.com</td>
      </tr>
      <tr>
        <td>Tim</td>
        <td>Dooley</td>
        <td>tim@example.com</td>
      </tr>
      <tr>
        <td>Tanja</td>
        <td>Ravendale</td>
        <td>tanja@example.com</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

1 Ответ

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

ОК, попробуйте это. 

$(document).ready(function() {
  $("#filter").click(function() {
    var value = $("#myInput").val();
    $("#myTable tr").hide().filter(function() {
      let rgx = new RegExp("\\b"+value+"\\b", "i");
      let result = $(this).text().match(rgx);
      return result != null;
    }).show();
  });
});
...