Filter Grid: getElementsByTagName is not a function

Question

I am trying to make a function to filter a grid. For this I am using a input type text with a onkeyup event Filter()

  <label>Filter:</label><input type="text" id="filterTextBox" onkeyup="Filter()" style="margin-left: 5px;  border: 1px solid #cccccc; border-radius: 4px;"/>

The JS:

function Filter() {
    // Declare variables 
    var input, filter, table, tr, column, td, i;
    input = document.getElementById("filterTextBox");
    filter = input.value.toUpperCase();
    table = document.getElementsByClassName("table");
    tr = table.getElementsByTagName("tr");
    // column = Document.getElementsByClassName("td-tc");

    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByClassName("td-tc")[0];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}

I've been trying to debug but honestly, I have no idea why I get the error:

Uncaught TypeError: table.getElementsByTagName is not a function

What do I miss here?

I've tried to google on the error, but I have no idea what could be wrong.

Answer 1

You tried to find TR on element collection, not single element.

First define correctly the table variable.

table = document.getElementsByClassName("table")[0];

Than tr definition should be okay.

tr = table.getElementsByTagName("tr");