TL;DR: The full code is available at the bottom of this post.

Let’s walk through building the whole page starting with the HTML.

HTML Structure:

First we’ll create a text input field that will be used to accept input to search on. We’ll also give it an id attribute set to "myInput", which is used to identify it in JavaScript later on.

<input type="text" id="myInput">

Next let’s add a table and add an id attribute set to "myTable", which will also be used to identify it in JavaScript later.

<table id="myTable">
</table>

HTML Table Content:

We’ll also need to add some content to the table see we can have some data to search when the JavaScript is added to test the filtering functionality.

The will table contain sample data with three columns: Name, Country, and City. Each row will represent an entry with corresponding values for these columns.

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Country</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>USA</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>UK</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>Canada</td>
      <td>Toronto</td>
    </tr>
    <tr>
      <td>Anna</td>
      <td>Germany</td>
      <td>Berlin</td>
    </tr>
    <tr>
      <td>Michael</td>
      <td>Australia</td>
      <td>Sydney</td>
    </tr>
  </tbody>
</table>

CSS Styling:

We’ll also apply some basic CSS styling to the table to provide borders and alternate row colors for better readability. The input field will also be styled to have a width of 100% and some padding for aesthetics.

	table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid #dddddd;
        padding: 8px;
        text-align: left;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    input[type=text] {
        width: 100%;
        padding: 8px;
        margin-top: 6px;
        margin-bottom: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

JavaScript Function (filterTable()):

Let’s get down the the matter that has brought us all here. The function that will hold the logic that is responsible for filtering the table based on the input text entered by the user.

In order to trigger it we will add the onkeyup event to the input field created above. This will call our function whenever the user types something in the input field.

Step through of the logic inside the function:

• It first retrieves the input element (myInput) and the table element (myTable) using their respective IDs.
• Then, it gets all the rows (tr) of the table.
• For each row, it loops through all the cells (td) to check if any of them contain the search query.
• If a match is found, the row is displayed by setting its display style property to an empty string (""), making it visible.
• If no match is found in any cell, the row is hidden by setting its display style property to "none".
• The search is case-insensitive, as both the search query and the table content are converted to uppercase using the toUpperCase() function before comparison.
• Only rows that match the search query in any of the columns are displayed, while others are hidden.

function filterTable() {
  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");
    for (var j = 0; j < td.length; j++) {
      txtValue = td[j].textContent || td[j].innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
        break;
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

This example creates an HTML table with three columns: Name, Country, and City. It also includes an input field at the top where users can type to filter the table based on the content of any of the columns. The filterTable() JavaScript function is called whenever the user types in the input field. It loops through each row of the table and checks if any of the cells contain the search query. If a match is found, the row is displayed; otherwise, it is hidden.

Overall, this example demonstrates how to implement a simple table filtering functionality using HTML, CSS, and JavaScript. It allows users to search for specific content across multiple columns of a table, providing a more interactive and user-friendly experience for data exploration and analysis.

Full HTML, CSS, JavaScript

See the Pen Filter HTML Table By Multiple Columns by Blake (@user76) on CodePen.

Find the full HTML in this gist.