Question

侧面没有桌子
在控制台中，我们得到“找不到404资源”
未捕获的ReferenceError：在Employee.js：19上未定义Employee1

    //Classes defined
class Employee {
constructor(employee_username, password, department, yy, email, level) {
    this.employee_user = employee_username;
    this.password = password;
    this.department = department;
    this.email = email;
    this.skills = [];
    this.level = level;
}
// function: Pushses new skill, in "Skills" array
addNewSkill(skill){
        this.skills.push(skill);
}
}
// function: Deletes from "skills" array

//Employee Database "Localstorage"
   if(localStorage.getItem('Employee') == null) {
        var employeeList = [];
       employeeList.push (new Employee1("Simon", 1234, "HR", 1999, "123@mail.dk", '1'));
       employeeList.push (new Employee2("Mads", 12345,"IT", 1999,  "1234@email.com", '1'));
       employeeList.push (new Employee3("Jessica", 54321, "Sales",1998, "Mail2@mail.dk",'1'));
       employeeList.push (new Employee4("Benjamin", 4321,"IT", 1997, "blabla@mail.dk", '1'));

       var employeeListString = JSON.stringify(employeeList)
       localStorage.setItem('Employee', employeeListString)
   } else {
       var employeeList = JSON.parse(localStorage.getItem('Employee'))
   }

    function buildTable(data) {
        let table = document.createElement("table");
        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.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 = "right";
                }
                row.appendChild(cell);
            });
            table.appendChild(row);
        });
return table;
    }
    document.querySelector(Employees)
        .appendChild(buildTable(employeeList));

   //var employeeOutput = document.getElementsByClassName(Employee)
    //employeeOutput.innerHTML = Employee;




   // lav en HTML side med <div id="employees"> ligesom mountains

    // indsæt buildTable function i javascript

    // Kald document.querySelector for employees og funktionen buildTable(employeeList) i stedet for buildTable(MOUNTAINS)

    // Læs kapitel 14 i bogen om DOM

Answer 1

第一件事：

您创建了一个类 Employee ，并尝试将其实例化为 Employee1 ， Employee2 和 Employee3 ，导致指定行中的错误。

Employees

Document.querySelector而不是选择器字符串
您没有在 thead 和 tbody

下面是经过适当更改的代码段：

//Classes defined

class Employee {
  constructor(employee_username, password, department, yy, email, level) {
    this.employee_user = employee_username;
    this.password = password;
    this.department = department;
    this.email = email;
    this.skills = [];
    this.level = level;
  }
  
  // function: Pushses new skill, in "Skills" array
  addNewSkill(skill){
    this.skills.push(skill);
  }
}

//Employee Database "Localstorage"
if(localStorage.getItem('Employee') == null) {
   var employeeList = [];
   employeeList.push (new Employee("Simon", 1234, "HR", 1999, "123@mail.dk", '1'));
   employeeList.push (new Employee("Mads", 12345,"IT", 1999,  "1234@email.com", '1'));
   employeeList.push (new Employee("Jessica", 54321, "Sales",1998, "Mail2@mail.dk",'1'));
   employeeList.push (new Employee("Benjamin", 4321,"IT", 1997, "blabla@mail.dk", '1'));

   var employeeListString = JSON.stringify(employeeList)
   localStorage.setItem('Employee', employeeListString)
} else {
   var employeeList = JSON.parse(localStorage.getItem('Employee'))
}

function buildTable(data) {
  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 = "right";
          }
          row.appendChild(cell);
      });
      table.querySelector('tbody').appendChild(row);
  });
  return table;
}

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

<div id="employees"></div>

请注意，由于该代码段已被沙盒化并且无法访问 localStorage ，因此该代码段将不起作用，只需在您的计算机上尝试该代码段，便会得到以下输出：

希望它会有所帮助：）

Answer 2

json不能仅将普通对象存储在类中。

您需要使用替换函数-JSON.stringify的参数

这个主意是这样的：


function replacer(key, value) {
  // Filtering out properties
  if (instanceof value === Employee) {
    return {
              ...value
           };
  }
  return value;
}

JSON.stringify(foo, replacer);

更多 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

然后加载

function reviver(value){
  return new Employee(value)
}

var employes=[]
if(text)employes=JSON.parse(text).map(reviver)

使用本地存储中的数据构建html表

2 个答案: