How to Filter HTML Table Data Using Select Options?

Filtering HTML table data using select options is a common way to improve the usability of large datasets displayed on a webpage. This process typically involves using JavaScript to dynamically show or hide table rows (<tr>) based on the value selected in a dropdown menu (<select>).

The Basic Principle of Filtering

The core idea is to:

Listen for a change in the selected value of the dropdown.
When a value is chosen, iterate through each row of the table.
For each row, examine the content of the table cell (<td>) that corresponds to the column being filtered.
Compare the content of that <td> with the selected dropdown value.
Show the row if it matches the filter criteria (or if no filter is selected) and hide it otherwise.

As highlighted in resources discussing this technique, you need some way to access the td elements of your html rows to perform the necessary comparison between the cell's content and the chosen filter value.

Step-by-Step Implementation with JavaScript

Here's a common approach using JavaScript and basic HTML/CSS:

1. Prepare Your HTML

You need a table and a select element. Give them IDs so you can easily reference them in JavaScript. Ensure your table has <thead> and <tbody>.

<div class="filter-container">
  <label for="categoryFilter">Filter by Category:</label>
  <select id="categoryFilter">
    <option value="">All Categories</option>
    <option value="Electronics">Electronics</option>
    <option value="Books">Books</option>
    <option value="Clothing">Clothing</option>
  </select>
</div>

<table id="productTable">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Category</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>Electronics</td>
      <td>$1200</td>
    </tr>
    <tr>
      <td>Novel</td>
      <td>Books</td>
      <td>$20</td>
    </tr>
    <tr>
      <td>T-Shirt</td>
      <td>Clothing</td>
      <td>$30</td>
    </tr>
    <tr>
      <td>Tablet</td>
      <td>Electronics</td>
      <td>$300</td>
    </tr>
  </tbody>
</table>

2. Add Basic CSS for Hiding

A simple CSS class can be used to hide rows.

.hidden {
  display: none;
}

3. Implement the JavaScript Filtering Logic

This script will listen for changes on the <select> and update the table.

document.addEventListener('DOMContentLoaded', function() {
  const filterDropdown = document.getElementById('categoryFilter');
  const tableBody = document.querySelector('#productTable tbody');
  const tableRows = tableBody.querySelectorAll('tr'); // Get all data rows

  filterDropdown.addEventListener('change', function() {
    const selectedValue = filterDropdown.value; // Get the chosen filter value

    tableRows.forEach(row => {
      // We need to access the specific td element corresponding to the 'Category' column.
      // In our HTML, 'Category' is the second column (index 1, zero-based).
      const categoryCell = row.querySelector('td:nth-child(2)');

      // Ensure the cell exists and get its text content
      if (categoryCell) {
        const rowCategory = categoryCell.textContent.trim(); // Get the category from the row's cell

        // Compare the row's category value with the filter value
        // If no filter is selected (empty value) OR the row category matches the selected value
        if (selectedValue === "" || rowCategory === selectedValue) {
          row.classList.remove('hidden'); // Show the row
        } else {
          row.classList.add('hidden'); // Hide the row
        }
      }
    });
  });
});

How the JavaScript Works:

We wait for the DOM to be fully loaded.
We get references to the <select> element, the <tbody>, and all the <tr> elements within the <tbody>.
We add an event listener to the change event of the filterDropdown.
When the dropdown value changes, we retrieve the selectedValue.
We then loop through each row in the tableRows collection.
Inside the loop, row.querySelector('td:nth-child(2)') is used to access the specific td element for the second column (Category) within the current row. This is the critical step for getting the data to compare.
We extract the text content from this <td> cell and trim any whitespace.
Finally, we compare rowCategory with the selectedValue. Based on the comparison, we add or remove the hidden class to the <tr> element, controlling its visibility.

Filtering by Multiple Columns

If you have multiple dropdowns for different columns (e.g., Category and Price Range), you would extend the JavaScript logic:

Get the selected values from all filter dropdowns.
When looping through each row, access the relevant td elements for each column that has a filter applied.
Check if the row's data matches the criteria for all active filters.
Only show the row if it passes all filter checks.

This requires slightly more complex logic to handle multiple conditions simultaneously.

By following these steps, you can effectively filter HTML table data using select options, making your tables more interactive and easier to navigate for users.

askvity