Search and exclude rows in HTML table

I have a HTML table with over a thousand rows and it’s only getting bigger.
I use this function to search the data in the table.

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

and an input box of

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

This works fine, I can find whatever I type in the box.
But I need another input box, or at least another way, to be able to exclude (hide) rows from the results of the search and also hide rows from the whole table.

So in the first input field I search for COKE and I get:


now I want to narrow that down to only LON, so I want to be able to type NYC into the Exclude input field. So basically the search is for COKE but not NYC.

Another example is searching for version numbers, search for 8.1 but not 8.1.17 .. that would return rows with 8.1, 8.1.2, 8.1.15, 8.1.18 … many possibilities, but not 8.1.17 … all those rows would be hidden.

So my feeling is there should be a search input field and an exclude input field that can work combined together.

I’m not well versed in javascript. Any help and ideas would be much appreciated.

30 thoughts on “Search and exclude rows in HTML table”

Leave a Comment