How to Create a Filter Table with JavaScript?

Last Updated : 16 May, 2024

Filter tables are commonly used in web applications to organize and display tabular data efficiently. It allows users to search and filter through large datasets easily. In this tutorial, we will go through the steps to create a filter table with JavaScript.

Approach

First, create the basic HTML structure with a container for the table, and an input field for searching, and the table itself with headers and data rows.
Then use the CSS style to enhance the appearance of the table, including style for the input field, table headers, alternating row colors.
Use the JavaScript code to handle user input in the search field. And add a event listener in it and handle the "input" event.
Filter the table rows based on the search query entered by the user. Display the additional message "no data is found".

Example: The example code below shows how to create a filter table with JavaScript.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport"            content="width=device-width, initial-scale=1.0">     <title>Filterable Table</title>     <link rel="stylesheet" href="style.css"> </head>  <body>      <div class="container">         <h1 class="main-heading">             How to Create a Filter Table with JavaScript         </h1>         <input type="text"                id="searchInput"                 placeholder="Search...">         <table id="dataTable">             <thead>                 <tr>                     <th>Name</th>                     <th>Age</th>                     <th>City</th>                 </tr>             </thead>             <tbody>                 <tr>                     <td>Priya</td>                     <td>30</td>                     <td>India</td>                 </tr>                 <tr>                     <td>Jane Smith</td>                     <td>25</td>                     <td>Los Angeles</td>                 </tr>                 <tr>                     <td>Antoine</td>                     <td>34</td>                     <td>France</td>                 </tr>                 <tr>                     <td>Yuki</td>                     <td>30</td>                     <td>USA</td>                 </tr>                 <tr>                     <td>Maria</td>                     <td>27</td>                     <td>Brazil</td>                 </tr>                 <tr>                     <td> Ivan</td>                     <td>22</td>                     <td>Russia</td>                 </tr>                 <tr>                     <td>John Doe</td>                     <td>30</td>                     <td>New York</td>                 </tr>             </tbody>         </table>         <span id="noMatch" style="display:none;">             No matching data is found !         </span>     </div>     <script src="script.js"></script> </body>  </html>

CSS

/* style.css */ body {     font-family: Arial, sans-serif;     background-color: #f7f7f7;     margin: 0;     padding: 0; }  .container {     max-width: 800px;     margin: 50px auto;     padding: 20px;     background-color: #ffffff;     border-radius: 8px;     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }  .main-heading {     text-align: center;     margin-bottom: 20px;     color: #0ef61a; }  #searchInput {     margin-bottom: 10px;     padding: 8px;     width: 20%;     box-sizing: border-box; }  table {     width: 100%;     border-collapse: collapse; }  #dataTable td, #dataTable th {     border: 1px solid #ddd;     padding: 8px; }  #dataTable th {     padding-top: 12px;     padding-bottom: 12px;     text-align: left;     background-color: #0ef61a;     color: white; }  #dataTable tr:nth-child(even) {     background-color: #dbe0de; }  #noMatch {     color: red;     margin-top: 2.5rem;     margin-left: 17rem;     font-size: 20px; }

JavaScript

/** script.js **/ let input = document.getElementById('searchInput'); let table = document.getElementById('dataTable'); let rows = table.getElementsByTagName('tr'); let noMatchMessage = document.getElementById('noMatch');  input.addEventListener('input', function () {     let filter = input         .value         .toLowerCase();     let matchFound = false;      for (let i = 1; i < rows.length; i++) {         let row = rows[i];         let cells = row             .getElementsByTagName('td');         let found = false;          for (let j = 0; j < cells.length; j++) {             let cell = cells[j];             if (cell.textContent.toLowerCase().indexOf(filter) > -1) {                 found = true;                 matchFound = true;                 break;             }         }          if (found) {             row.style.display = '';         } else {             row.style.display = 'none';         }     }      if (!matchFound) {         noMatchMessage.style.display = 'block';     } else {         noMatchMessage.style.display = 'none';     } });

Output:

How to Append Header to a HTML Table in JavaScript ?

skaftafh

Improve

Article Tags :

How to Create a Filter Table with JavaScript?

Approach

Similar Reads