Jquery Search Filter Table Rows Example

In this article, we will see jquery search filter table rows example. here we will see how to search data using the jquery filter. Manytimes we have requirements to filter or find specific data from the HTML table. Here we will use the filter() method returns elements that match certain criteria.

So, let's see how to search data using jquery filter, how to search data using jquery filter, filter table rows using jquery, jquery search filter table rows example, search table rows using jquery, jquery search table rows.

Example: Jquery Search Filter Table Rows Example

Here, we will create table and add search box.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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>

<h2>Jquery Search Filter Table Rows Example- Techsolutionstuff</h2>
<input id="myInput" type="text" placeholder="Search Here..">
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>Carry</td>
    <td>james</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Jery</td>
    <td>joe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Demo</td>
    <td>roof</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Jeff</td>
    <td>befos</td>
    <td>[email protected]</td>
  </tr>
  </tbody>
</table>

</body>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</html>

 


You might also like:

RECOMMENDED POSTS

FEATURE POSTS