Welcome User
Login
Register
filter search data
Sophia Jain
HTML
CSS
JS
Preview
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <br> <table class="table table-bordered"> <thead> <tr class="bg-info"> <th>ID</th> <th>NAME</th> <th>Email</th> <th>Address</th> </tr> </thead> <tbody id="myTableehai"> <tr> <td>101</td> <td>Alok</td> <td>alok@gmail.com</td> <td>Noida</td> </tr> <tr> <td>102</td> <td>Praveen</td> <td>praveen@mail.com</td> <td>Delhi</td> </tr> <tr> <td>103</td> <td>Sam</td> <td>Sam@gmail.com</td> <td>Goa</td> </tr> <tr> <td>104</td> <td>Deepti</td> <td>Deepti@gmail.com</td> <td>Gr Noida</td> </tr> </tbody> </table> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTableehai tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>
View Another Modules
Launch Modal on load page
Launch Modal on load page
Disable outside Modal
Disable outside Modal
Registration and Login Form
Registration and Login Form
Hover Effect
Hover Effect
Date Picker
Date Picker
Responsive Registration Form
Responsive Registration Form
