[英]How do I make a search function that runs through my html table, made from local storage?
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.imgur.com/GvbT45A.png放入HTML页面,如下图: https : //i.imgur.com/GvbT45A.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.如果我写了一个以“S”开头的名字,所有不以 S 开头的名字都应该被过滤掉。 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.当我将代码导入 HTML 并使用以下输入标记时: <input type="text" id="search" placeholder="Type to 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.我认为这是因为我的 HTML 表是由数组或类似的东西组成的。
I hope you guys can help me with this issue as I am very new to Javascript.我希望你们能帮助我解决这个问题,因为我对 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"));
}
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].在您的 searchTable() 函数中,您使用 document.getElementsByTagName() 初始化表格,但 getElementsByTagName() 返回 HTMLCollection,因此如果您的文档中只有一个表格元素,请尝试设置:table = document.getElementsByTagName("table")[ 0]。 tr the same. tr一样。 Also post your data object.还发布您的数据对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.