How do I get my search function work to filter searched items from table?

Question

I've made a table filled with data retreived from a JSON file. Now I'm trying to make a searchbar that filters searched items and only shows the table rows of the items searched for. The code of the function I'm using now is:

//Search function
          function searchTable() {
        var input, filter, found, table, tr, td, i, j;
        input = document.getElementsByClassName("searchBar");
        filter = input.value.toUpperCase();
        table = document.getElementById("productTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td");
            for (j = 0; j < td.length; j++) {
                if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    found = true;
                }
            }
            if (found) {
                tr[i].style.display = "";
                found = false;
            } else {
                tr[i].style.display = "none";
            }
        }
    }
});

This is the HTML of the table I'm trying to apply the filter to:


                    
                        
                        
                            #
                            Product Name
                            Free Stock
                            Price
                            Actions

user_6076863 · Answer

Here is the best solution for searching inside HTML table while covering all of the table, (all td, tr in the table), pure javascript and as short as possible:




  
    
      #
      Product Name
      Free Stock
      Price
      Actions
    
  
  
    
      1
      Green
      Lorem
      Ipsum
      button
    
    
      2
      Green
      elit
      Mumbai
      button
    
    
      3
      Green
      sud
      Dummy
      button

user_6076863 · Answer

The problem is getElementsByClassName does not return an element. Instead, it returns a NodeList. If you only have a single element with class=“searchBar” then you would reference as:

input = document.getElementsByClassName("searchBar")[0];

Updated script with your existing ID is

function searchTable() {
        var input, filter, found, table, tr, td, i, j;
        input = document.getElementsByClassName("searchBar")[0];
        filter = input.value.toUpperCase();
        table = document.getElementById("productTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td");
            for (j = 0; j < td.length; j++) {
                if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    found = true;
                }
            }
            if (found) {
                tr[i].style.display = "";
                found = false;
            } else {
                tr[i].style.display = "none";
            }
        }
    }

However, if you are only going to have one of these elements, I suggest giving it an id and use getElementById and then you will actually get an element.

How do I get my search function work to filter searched items from table?

2 Answers