How to Create a Filter/Search Table in HTML using Jquery

Here we write Jquery code for search text from HTML table and based on that it will filter HTML table row and figure out searching text available in any of the table cells if a search query is available in any of the table cell then it will display that table row on web page. This type of functionality is very useful in our web application, this is because for filter data from html we have not executed any server side code for filter data and all things we have done on web page.


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.

 

*In this article, we will filter data with only by name (one column), if you want to filter withall columns click here *

 


HTML Code:-

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}

 

#myInput {

  background-image: url('/css/searchicon.png');

  background-position: 10px 10px;

  background-repeat: no-repeat;

  width: 100%;

  font-size: 16px;

  padding: 12px 20px 12px 40px;

  border: 1px solid #ddd;

  margin-bottom: 12px;

}

 

#myTable {

  border-collapse: collapse;

  width: 100%;

  border: 1px solid #ddd;

  font-size: 18px;

}

 

#myTable th, #myTable td {

  text-align: left;

  padding: 12px;

}

 

#myTable tr {

  border-bottom: 1px solid #ddd;

}

 

#myTable tr.header, #myTable tr:hover {

  background-color: #f1f1f1;

}

</style>

</head>

<body>

 

<h2>Cricket Team List</h2>

 

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names." title="Type in a name">

 

<table id="myTable">

  <tr class="header">

    <th style="width:60%;">Name</th>

    <th style="width:40%;">Country</th>

  </tr>

  <tr>

    <td>Rahul Dravid</td>

    <td>India</td>

  </tr>

  <tr>

    <td>Stephen Fleming</td>

  <td>New Zealand</td>

  </tr>

  <tr>

    <td>Arvind kumar</td>

    <td>India</td>

  </tr>

  <tr>

    <td>Chris Cairns</td>

    <td>New Zealand</td>

  </tr>

  <tr>

    <td>Adam Gilchrist</td>

    <td>Australia</td>

  </tr>

  <tr>

    <td>Shane Warne</td>

    <td>Australia</td>

  </tr>

  <tr>

    <td>Virender Sehwag</td>

     <td>India</td>

  </tr>

  <tr>

    <td>Makhaya Ntini</td>

    <td>South Africa</td>

  </tr>

    <tr>

    <td>Brian Lara</td>

    <td>West Indies</td>

  </tr>

    <tr>

    <td>Jacques Kallis</td>

    <td>South Africa</td>

  </tr>

</table>

 

<script>

function myFunction() {

  var input, filter, table, tr, td, i, txtValue;

  input = document.getElementById("myInput");

  filter = input.value.toUpperCase();

  table = document.getElementById("myTable");

  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {

    td = tr[i].getElementsByTagName("td")[0];

    if (td) {

      txtValue = td.textContent || td.innerText;

      if (txtValue.toUpperCase().indexOf(filter) > -1) {

        tr[i].style.display = "";

      } else {

        tr[i].style.display = "none";

      }

    }      

  }

}

</script>

 

</body>

</html>

 

Out-Put:

 

Cricket Team List

Name Country
Rahul Dravid India
Stephen Fleming New Zealand
Arvind kumar India
Chris Cairns New Zealand
Adam Gilchrist Australia
Shane Warne Australia
Virender Sehwag India
Makhaya Ntini South Africa
Brian Lara West Indies
Jacques Kallis South Africa
How to Create a Filter/Search Table in HTML using Jquery  How to Create a Filter/Search Table in HTML using Jquery Reviewed by NEERAJ SRIVASTAVA on 6:07:00 PM Rating: 5

No comments:

Powered by Blogger.