How do I make a search function that runs through my html table, made from local storage?

Question

I have the following code that takes arrays from local storage and puts it into a table.

//Function creates table for employeeList
function buildTable(data) {
    // creates variable "table"
    let table = document.createElement("table");

        // Create table head and body
        table.appendChild(document.createElement("thead"));
        table.appendChild(document.createElement("tbody"));

        let fields = Object.keys(data[0]);
        let headRow = document.createElement("tr");
        fields.forEach(function (field) {
            let headCell = document.createElement("th");
            headCell.textContent = field;
            headRow.appendChild(headCell);
        });
        table.querySelector("thead").appendChild(headRow);
        data.forEach(function (object) {
            let row = document.createElement("tr");
            fields.forEach(function (field) {
                let cell = document.createElement("td");
                cell.textContent = object[field];
                if (typeof object[field] == "number") {
                    cell.style.textAlign = "left";
                }
                row.appendChild(cell);
            });
            table.querySelector("tbody").appendChild(row);
        });
        return table;

    }

document.querySelector("#employees").appendChild(buildTable(employeeList));

Putting it into and HTML page, it looks like this: https://i.stack.imgur.com/lMefO.png

I want to make a Search/Filter function that searches on the names in the list. If I write a name that begins with "S", all the names not beginning with an S should be filtered away. I have tried the following code:

function searchTable(){
    // Declare variables
    var input, filter, table, tr, td, i;
    input = document.getElementById("search");
    filter = input.value.toUpperCase();
    table = document.getElementsByTagName("table");
    tr = table.getElementsByTagName('tr');

    // Loop through all table rows, and hide those who don't match the search query
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td") ;
        for(j=0 ; j<td.length ; j++)
        {
            let tdata = td[j] ;
            if (tdata) {
                if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                    break ;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
}

When I source my code into HTML and use the following input tag: <input type="text" id="search" placeholder="Type to search"> it will not search. I have tried to do what have succeeded for many people here on stack overflow, who has had the same problem, but none of them works. I think it is because my HTML table is made from an array or something like that.

I hope you guys can help me with this issue as I am very new to Javascript. Please let me know if you need any more info!

My data object:

//Employee Database "Localstorage"
if(localStorage.getItem("Employee") == null) {
    var employeeList = [];
    employeeList.push (new Employee("Simon", "Male", "HR", 1999, "SM1@cbs.dk"));
    employeeList.push (new Employee("Mads", "Male","IT", 1999,  "MS@cbs.dk"));
    employeeList.push (new Employee("Jessica", "Female", "Sales",1998, "JT@cbs.dk"));
    employeeList.push (new Employee("Benjamin", "Male","IT", 1997, "BN@cbs.dk"));

    var employeeListString = JSON.stringify(employeeList);
    localStorage.setItem("Employee", employeeListString);
    document.querySelector("#employees").appendChild(buildTable(employeeList));
} else {
    var employeeList = JSON.parse(localStorage.getItem("Employee"));
}

Please don't post images of code, post code instead. After pasting it into the question, select it again, then press Ctrl+K. — , Dec 06 '19 at 19:21
Hey Chris - thanks for the tip! The change has been made now, and it should be pasted in. — Mads Rasmussen, Dec 06 '19 at 19:25
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — , Dec 06 '19 at 19:30

score 0 · Answer 1 · answered Dec 06 '19 at 19:28

0

In your searchTable() function you initialize table with document.getElementsByTagName(), but getElementsByTagName() returns HTMLCollection, so if you have only one table element in your document, try to set: table = document.getElementsByTagName("table")[0]. tr the same. Also post your data object.

answered Dec 06 '19 at 19:28

standbyoneself

135
6

Hey, thanks for the input! I have inserted the data that my table is built on above. I have made the changes that you mentioned. It still seems, that my table will not link with my search function. – Mads Rasmussen Dec 06 '19 at 19:37

How do I make a search function that runs through my html table, made from local storage?

1 Answers1