<!DOCTYPE html>

<html>

<head>

<title>Info Table</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/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>Lakshman</td>

<td>Gope</td>

<td>lakshman@example.com</td>

</tr>

<tr>

<td>Raton</td>

<td>Biswas</td>

<td>raton@mail.com</td>

</tr>

<tr>

<td>JOJO</td>

<td>Dooley</td>

<td>jojo@example.com</td>

</tr>

<tr>

<td>Proddut</td>

<td>Gope</td>

<td>proddut@test.com</td>

</tr>

</tbody>

</table>

<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>

</body>

</html>