How to Create a Filter Table with JavaScript? Last Updated : 16 May, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. ApproachFirst, 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: Comment More infoAdvertise with us Next Article How to filter Nested Array using Key in JavaScript ? S skaftafh Follow Improve Article Tags : JavaScript Similar Reads Create a Sortable and Filterable Table using JavaScript In this article, we will demonstrate how to create a sortable and filtrable table using JavaScript. This custom table will have the functionality of editing or removing individual items along with sorting and filtering items according to different fields. Also, a form is attached so that the user ca 6 min read How to Filter an Array in JavaScript ? The array.filter() method is used to filter array in JavaScript. The filter() method iterates and check every element for the given condition and returns a new array with the filtered output.Syntaxconst filteredArray = array.filter( callbackFunction ( element [, index [, array]])[, thisArg]);Note: I 2 min read How to filter Nested Array using Key in JavaScript ? Filtering a nested array in JavaScript involves the process of selectively extracting elements from an array of objects, where each object contains another array. We will discuss how can we filter Nested Array using the key in JavaScript. Filtering a nested array based on a key in JavaScript can be 3 min read How to Create an HTML Table from an Object Array Using JavaScript ? Tables are a fundamental part of web development, and displaying data in a structured manner is a common requirement. JavaScript provides a powerful way to dynamically generate HTML content, making it easy to create tables from object arrays. Table of Content Using innerHTML propertyUsing appendChil 2 min read JavaScript Array filter() Method The filter() method creates a new array containing elements that satisfy a specified condition. This method skips empty elements and does not change the original array.Create a new array consisting of only those elements that satisfy the condition checked by canVote() function.JavaScript// JavaScrip 3 min read How to export HTML table to CSV using JavaScript ? Comma Separated Values or CSV is a type of text file where each value is delimited by a comma. CSV files are very useful for the import and export of data to other software applications.Sometimes while developing web applications, you may come into a scenario where you need to download a CSV file co 6 min read Like