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..

jquery live search html table

That's it friends how to perform live search in html using jquery..
if you like this post please share and don't forget to comments..Thank You..

Latest

What is Dark web vs Deep Web and how to access Dark web/Deep Web

How to Create popup Widget for Blogger

Sendinblue Review a Cheap email marketing Service

Bluehost Review 2018

PHP ajax Inline Insert

JavaScript Hide Show Password

JavaScript countdown timer code

javascript digital clock with date

JavaScript Digital Clock Example

javascript password protect page with JavaScript Prompt

export mysql database table to csv using php

php xml to array

Import CSV file into MySQL using PHP

php read csv file

php export to excel

php read xml file

php upload multiple files

PHP File upload

ajax pagination with php

php http authentication example

php create zip file

JavaScript Capture keyboard events -Get Pressed key and Keycode

Detect the screen resolution with JavaScript

get ip address in php

add syntax highlighter to blogger

Monday, February 26, 2018

jquery live search html table