我如何制作通过本地存储制成的html表中运行的搜索功能？

Question

我有以下代码，该代码从本地存储中获取数组并将其放入表中。

//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));

将其放入HTML页面，如下所示：https://i.imgur.com/GvbT45A.png

我想创建一个搜索/过滤器功能来搜索列表中的名称。如果我写的名字以“ S”开头，那么所有不以S开头的名字都应该被过滤掉。我尝试了以下代码：

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";
                }
            }
        }
    }
}

当我将我的代码转换成HTML并使用以下输入标签：<input type="text" id="search" placeholder="Type to search">时，它将不会搜索。我曾尝试做过许多成功的事情，这些人在堆栈溢出时遇到了同样的问题，但是他们都不起作用。我认为这是因为我的HTML表是由数组或类似的东西制成的。

我希望大家对我的Java语言很陌生，可以为我解决这个问题。如果您需要更多信息，请告诉我！

Answer 1

在searchTable（）函数中，您使用document.getElementsByTagName（）初始化表，但是getElementsByTagName（）返回HTMLCollection，因此，如果文档中只有一个表元素，请尝试设置：表格= document.getElementsByTagName（“表格”）[0]。 tr相同。同时发布您的数据对象。