<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>Surname</th> </tr> </thead> <tbody id="myTable"> <tr> <td>Raj</td> <td>Girish</td> <td>Parmar</td> </tr> <tr> <td>Mohan</td> <td>viraj</td> <td>koli</td> </tr> <tr> <td>Jainish</td> <td>ratan</td> <td>vyas</td> </tr> <tr> <td>Tom</td> <td>kim</td> <td>zone</td> </tr> <tr> <td>Rohan</td> <td>Prithvi</td> <td>koli</td> </tr> <tr> <td>Vikram</td> <td>Girish</td> <td>vyas</td> </tr> </tbody> </table> <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>

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; }

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