Learn how to create a filter/search HTML table using JQuery code. This beginner-friendly tutorial will guide you through the process step-by-step.
When you have a large list of records, it is helpful to display them in an HTML table. This makes it easy to view and sort the data. However, if the list is too large, it can be difficult to find the information you are looking for. One way to solve this problem is to allow users to search for text within the table.
Introduction
In this tutorial, we will learn how to perform a real-time search and filter an HTML table. When a user enters a word, all rows in the table (except the table header) will be searched and the rows containing the matching word will be displayed.
Filterable HTML tables can be beneficial for users by improving the user experience and making it easier to navigate large amounts of data. They can be created with just a few lines of code.
Let’s start making these Filter/Search HTML Table using HTML, CSS and JavaScript(JQuery) step by step.
Prerequisites:
To follow this tutorial, you should have a basic understanding of the following technologies:
- HTML: Hyper Text Markup Language is the language used to create web pages.
- CSS: Cascading Style Sheets is used to style web pages.
- JavaScript: JavaScript is a programming language that can be used to add interactivity to web pages.
You will also need a code editor to write and save your code. Some popular code editors include:
- Visual Studio Code: A free and open-source code editor developed by Microsoft.
- Sublime Text: A commercial code editor that is popular for its speed and flexibility.
Once you have the necessary knowledge and tools, you can start following this tutorial.
Read Also: Creating a Simple Calculator using HTML and Pure CSS
Source Code
Step 1
The first thing we need to do is create our HTML file. In the HTML file, create an input element with an id name “search” for the search box and create your table element with an id name “tab“. Also, In head section of your HTML page paste JQuery library script tag. Without this script tag, your function will not work.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our search table using HTML, and now we can move on to styling it using CSS.
<html lang="en">
 <head>
  <title>Home</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="styles.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 </head>
 <body>
  <div>
    <h1>Myritebook - Learning Tutorials</h1>
    <b>Search the table for Name, Location or Age:
    <input id="search" type="text" placeholder="Search here">
   </b>
    <br>
    <br>
    <table id="tab">
      <tr>
        <th>Name</th>
        <th>Location</th>
        <th>Age</th>
      </tr>
      <tbody>
        <tr>
          <td>Ben Chen</td>
          <td>China</td>
          <td>41</td>
        </tr>
        <tr>
          <td>Bob White</td>
          <td>Canada</td>
          <td>55</td>
        </tr>
        <tr>
          <td>Carlo Silva</td>
          <td>Italy</td>
          <td>47</td>
        </tr>
        <tr>
          <td>Clara Lee</td>
          <td>South Korea</td>
          <td>19</td>
        </tr>
        <tr>
          <td>Elodie Nguyen</td>
          <td>France</td>
          <td>33</td>
        </tr>
        <tr>
          <td>Jenny Miller</td>
          <td>Australia</td>
          <td>22</td>
        </tr>
        <tr>
          <td>Julius Kaplan</td>
          <td>Germany</td>
          <td>37</td>
        </tr>
        <tr>
          <td>Leena Ahmed</td>
          <td>India</td>
          <td>29</td>
        </tr>
        <tr>
          <td>Maria Rodriguez</td>
          <td>Mexico</td>
          <td>24</td>
        </tr>
        <tr>
          <td>Peter Jackson</td>
          <td>South Africa</td>
          <td>21</td>
        </tr>
      </tbody>
    </table>
  </div>
 Â
  <script type="module" src="script.js"></script>
 </body>
</html>Step 2
The given CSS styles are optional for the table. Anyhow, you can use the following CSS styles if you want to beautify the HTML table.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 55%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
h1 {
color: green;
}Step 3
Finally, add the following JQuery function into your project for table search filter.
Once you have linked JQuery to your HTML document, you can add the following JQuery function to your project to create a table search filter. The function will set up an event listener for the input element with an ID of “search”. When a user types in the input field, the table rows will be filtered based on the input value.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it’s linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
$(document).ready(function() {
  $("#search").on("keyup", function() {
    var value = $(this).val().toLowerCase();
   $("#tab tr").filter(function() {
      $(this).toggle($(this).text()
       .toLowerCase().indexOf(value) > -1)
    });
  });
});
Final Output
Conclusion
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
