jquery live search html table

Hi Friends in this JQuery Script Example we are going to learn how to perform live serch in html table using jquery..
just follow the below simple jquery codes to perform jquery search in html table...

index.html codes:

<html>
<head>
<title>Search in HTML Table using JQuery</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
  <div id="content" align="center">
    <h3>Search in HTML table using JQuery:</h3>
   <label>Search for:</label>
    <input type="text" id="searchtext" autocomplete="off"/>

    <table id="htmltable">
      <tr>
      <th>Company</th>
   <th>Location</th>
   </tr>
   <tr>
      <td>Google Inc</td>
   <td>United States</td>
   </tr>
   <tr>
      <td>Facebook Inc</td>
   <td>United States</td>
   </tr>
   <tr>
      <td>Infosys Inc</td>
   <td>Bangalore,India</td>
   </tr>
   <tr>
      <td>Reliance Inc</td>
   <td>Mumbai,India</td>
   </tr>
   <tr>
      <td>Baidu Inc</td>
   <td>China</td>
   </tr>
   <tr>
      <td>Alibaba Group</td>
   <td>China</td>
   </tr>
    </table>
  </div>
</html>

script.js codes to perform live search

$(document).ready(function(){
 $("#searchtext").keyup(function(){
  var searchval= $("#searchtext").val();
  searchtable(searchval);
 }); 
});
function searchtable(inputVal)
{
 var table = $('#htmltable');
 table.find('tr').each(function(index, row)
 {
        var cellval = $(row).find('td');    
  if(cellval.length > 0)
  {
   var found = false;
   cellval.each(function(index, td)
   {
    var regExp = new RegExp(inputVal, 'i');
    if(regExp.test($(td).text()))
    {
     found = true;
     return false;
    }
   });
   if(found == true)$(row).show();else $(row).hide();
  }
 });
}

style.css to design table and input field

input[type=text]{
  padding:4px;
  border-radius:4px;
  width:20%;
 }
 input[type=text]:focus{
  padding:4px;
  border-radius:4px;
  background:black;
  color:white;
  font-weight:bold;
  text-transform:capitalize;
  width:20%;
 }
 label{
  font-weight:bold;
  font-style:italic;
  color:green;
 }
table{
 border-collapse:collapse;
 width:30%;
 }
 th,td{
   border:1px solid green;
 }
 th{
   font-size:18px;
   background:black;
   color:white;
   padding:6px;
 }
 td{
   padding:6px;
   
   font-style:italic;
 }
 tr:nth-child(odd){
     background:#009933;
  color:indigo;
  }
 tr:nth-child(even){
     background:#3399ff;
  color:white;
  } 
tr:hover{
  background:#ff0000;
  color:white;
  cursor:pointer;
}

When you type some text in input box your result will be look like below..