How To Filter Data From Html Table Using JQuery

Introduction

In this article, I will explain how to search data from HTML table using the JQuery function. We will learn how to create functions using JQuery and how to add the JQuery library to our webpage.

We will also learn how to apply CSS on HTML table and how to add inline CSS in any div or element. I am not explaining how to create project in visual studio. Hopefully, you know how to create projects in visual studio.

Step 1 - Add one web page to your project and then add the below code in the body section of your web page.

<div id="flip">Click to slide the panel down or up</div>
   <div id="panel">
   <br />
   <span>Search by FirstName, LastName or Email</span>
   <input id="myInput" class="fortextbox"  type="text" placeholder="Search.." />
   <br /><br /><br />

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
      <th>Contact Number </th>
      <th>Address</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
      <td>9874563210</td>
      <td>Mumbai</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
      <td>9874563210</td>
      <td>Pune</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
      <td>9874563210</td>
      <td>Delhi</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>[email protected]</td>
      <td>9874563210</td>
      <td>Kolkata</td>
  </tr>
  </tbody>
</table>

<br />
</div>

Step 2 - Add below CSS to your webpage.

<style>
         a.btn {
      color: #fff;
      background: #FF0066;
      padding: .5rem 1rem;
      display: inline-block;
      border-radius: 4px;
      transition-duration: .25s;
      border: none;
      font-size: 14px;
    }
    a.btn:hover {
      background: #22272a;
    }

    #panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
     #panel1, #flip1 {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  padding: 50px;
  display: none;
}

#panel1 {
  padding: 50px;
  display: none;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 3px solid #3a3434;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

    .fortextbox {
        width: 227px;
        height: 25px;
        border-radius: 5px;
    }
</style>

Step 3 - Add below JavaScript file into head section of web page 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step 4 - Create function using Jquery is given below 

<script type="text/javascript">
        $(document).ready(function () {

$("#flip").click(function () {
            $("#panel").slideToggle("slow");
        });

        $("#flip1").click(function () {
            $("#panel1").slideToggle("slow");
        });

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

Step 5 - Run the project and check it. The output looks like below.