How to create a filter table with JavaScript?

JavascriptWeb DevelopmentObject Oriented Programming

To create a filter table with JavaScript, the code is as follows −


 Live Demo

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
   * {
      box-sizing: border-box;
   .searchField {
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
   .birthDayTable {
      border-collapse: collapse;
      width: 100%;
      font-size: 18px;
   .birthDayTable th, .birthDayTable td {
      text-align: left;
      padding: 12px;
   .birthDayTable tr {
      border-bottom: 4px solid #ddd;
   .birthDayTable tr.header, .birthDayTable tr:hover {
      background-color: #f1f1f1;
<h1>Filter table example</h1>
<input type="text" class="searchField" placeholder="Friend Name:" />
<table class="birthDayTable">
<tr class="header">
<th style="width:60%;">Friends</th>
<th style="width:40%;">Birthday Month</th>
   document .querySelector(".searchField") .addEventListener("keyup", searchFunction);
   function searchFunction() {
      var input, filter, table, tr, td, i, txtValue;
      input = document.querySelector(".searchField");
      filter = input.value.toUpperCase();
      table = document.querySelector(".birthDayTable");
      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";


The above code will produce the following output −

On entering something in the search field −

Updated on 06-May-2020 14:19:22