Javascript Logic For Searching Through Html Table

This JavaScript logic allows you to easily search and filter through the rows of an HTML table based on user input.

To get started, you’ll need an HTML table with rows of data that you want to search through. Each row should consist of one or more table cells containing the data you want to search.

To enable the search functionality, we’ve provided an input field where you can enter your search query. As you type in the input field, the table will dynamically update to display only the rows that match your search.

The logic behind the search is simple but effective. We iterate over each row in the table and compare the text content of each cell to your search query. If a match is found, the row remains visible. If not, the row is hidden.

You can easily customize this logic to suit your specific table structure and requirements. Feel free to modify the HTML and adapt the JavaScript code as needed.

HTML:

<input type="text" id="searchInput" placeholder="Search...">
<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>555-5678</td>
    </tr>
    <!-- Additional table rows -->
  </tbody>
</table>

JavaScript:

// Get the search input element and table element
const searchInput = document.getElementById('searchInput');
const table = document.getElementById('table');

// Add event listener to the search input for input changes
searchInput.addEventListener('input', function(event) {
  const searchText = event.target.value.toLowerCase(); // Get the search text and convert to lowercase

  // Iterate over the table rows
  Array.from(table.rows).forEach(function(row) {
    const rowData = Array.from(row.cells).map(cell => cell.textContent.toLowerCase()); // Get the text content of each cell and convert to lowercase
    const match = rowData.some(text => text.includes(searchText)); // Check if any cell text matches the search text

    // Show/hide the row based on the match
    row.style.display = match ? '' : 'none';
  });
});

In this example, we start by selecting the search input element and the table element using getElementById.

Then, we add an event listener to the search input for input changes using addEventListener and the input event. Whenever the input value changes, the event listener function will be triggered.

Inside the event listener function, we retrieve the search text from the input and convert it to lowercase using toLowerCase().

Next, we iterate over the table rows using Array.from(table.rows) and a forEach loop. For each row, we retrieve the text content of each cell using Array.from(row.cells).map(cell => cell.textContent.toLowerCase()) and convert it to lowercase. This gives us an array of cell texts for the current row.

We then check if any of the cell texts contain the search text using the some method and text.includes(searchText). If a match is found, the some method will return true.

Based on the match result, we show or hide the row by setting the display CSS property. If there’s a match, we set row.style.display = '' to show the row. Otherwise, we set row.style.display = 'none' to hide the row.

As the user types in the search input, the table rows will dynamically show or hide based on the search text, filtering the table content accordingly.