L48 Filter Tables

L48 Filter Tables
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>
<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>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>  
<input id="myInput" type="text" placeholder="Search..">
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>Saurabh</td>
    <td>Chugh</td>
    <td>bapugraphicsindia@gmail.com</td>
  </tr>
  <tr>
    <td>Sahil</td>
    <td>Chugh</td>
    <td>contactbapugraphics@gmail.com</td>
  </tr>
  <tr>
    <td>Sunny</td>
    <td>Kalra</td>
    <td>Sunny@gmail.com</td>
  </tr>
  <tr>
    <td>Anjani</td>
    <td>Kakkar</td>
    <td>a_k@yahoo.com</td>
  </tr>
  </tbody>
</table>
  
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>

</body>
</html>

Take Your Free Live Demo Class Now

Enter Your DETAILS BELOW

To Get Complete Information or We Will Call You

We Will Send You the Course Fees Details In Below Number

Enter Your DETAILS BELOW

We Will Call Back You Shortly

Enter Your DETAILS BELOW

We Will Call Back You Shortly

Enter Your DETAILS BELOW

Enter Your DETAILS BELOW TO take

free demo class