Filters

1
<div class="w3-padding w3-white notranslate" style="width:100%">
2
<div style="width:100%">
3
  <p style="margin-top:14px">Type something in the input field to search the table for first names, last names or emails:</p>
4
  <input id="myInput" type="text" placeholder="Search..">
5
  <br>
6
  <table class="ws-table-all">
7
    <thead>
8
      <tr>
9
        <th>Firstname</th>
10
        <th>Lastname</th>
11
        <th>Email</th>
12
      </tr>
13
    </thead>
14
    <tbody id="myTable">
15
      <tr>
16
        <td>John</td>
17
        <td>Doe</td>
18
        <td>[email protected]</td>
19
      </tr>
20
      <tr>
21
        <td>Mary</td>
22
        <td>Moe</td>
23
        <td>[email protected]</td>
24
      </tr>
25
      <tr>
26
        <td>July</td>
27
        <td>Dooley</td>
28
        <td>[email protected]</td>
29
      </tr>
30
      <tr>
31
        <td>Anja</td>
32
        <td>Ravendale</td>
33
        <td>[email protected]</td>
34
      </tr>
35
    </tbody>
36
  </table>
37
</div>
38
</div>

1
$(document).ready(function(){
2
  $("#myInput").on("keyup", function() {
3
    var value = $(this).val().toLowerCase();
4
    $("#myTable tr").filter(function() {
5
      $(this).toggle( $(this).text().toLowerCase().indexOf(value) > -1 );
6
    });
7
  });
8
});