<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search the Perticular text in table , Simple using jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin-bottom:20px;">
<div class="row">
<div class="col-sm-6" style="float:right;">
<input type="search" id="searchBox" value="" class="form-control" placeholder="whats you looking for ?" />
</div>
</div>
</div>
<div class="container">
<table class="table" id="tableData">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>abhishekuly</td>
<td>Dooley</td>
<td>abhishekuly@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr>
<td>Aman</td>
<td>Dooley</td>
<td>aman@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#searchBox').on('keyup',function(){
var searchContent = $(this).val().toLowerCase();
$('#tableData tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchContent) === -1){
$(this).hide();
}else{
$(this).show();
}
});
});
});
</script>
