Javascript 如何使用本地存储创建一个贯穿html表的搜索函数?
我有以下代码,它从本地存储中获取数组并将其放入表中Javascript 如何使用本地存储创建一个贯穿html表的搜索函数?,javascript,input,filter,html-table,Javascript,Input,Filter,Html 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
//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页面,如下所示:
我想创建一个搜索/筛选函数,用于搜索列表中的名称。如果我写了一个以“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";
}
}
}
}
}
在searchTable()函数中,可以使用document.getElementsByTagName()初始化表,但getElementsByTagName()返回HTMLCollection,因此,如果文档中只有一个表元素,请尝试设置:
table=document.getElementsByTagName(“表”)[0]。还是一样。同时发布数据对象。请不要发布代码图像,而是发布代码。将其粘贴到问题中后,再次选择它,然后按Ctrl+K。嘿,克里斯-谢谢你的提示!更改已经完成,应该粘贴进去。这是否回答了您的问题?嘿,谢谢你的意见!我已经在上面插入了我的表所基于的数据。我已经做了你提到的改变。我的表似乎仍然无法与搜索功能链接。
//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"));
}