javascript - 有没有更有效的方法从 Javascript 中的对象填充表？

Question

我希望有人能向我展示一种从对象填充表格的更有效且更简洁的方法。或者指出一种更简单的数据存储方式，以便更容易访问？

如您所见，我目前的做法似乎有点荒谬。我是新手，我找不到用循环来做的简单方法。

var rotaOb = {
  //It should have be able store staff
  staff: [{
      staff_staffN: 1234,
      staff_fName: "John",
      staff_sName: "Smith",
      staff_dept: "Cameras",
      staff_seniority: "senior",
      staff_fullTime: false,
      staff_pNumber: "+123 45678910",
      staff_sEmail: "john.smith@whotsit.com"
    }, 
    {
      staff_staffN: 2345,
      staff_fName: "John2",
      staff_sName: "Smith2",
      staff_dept: "Cameras",
      staff_seniority: "Junior",
      staff_fullTime: true,
      staff_pNumber: "+123 25678910",
      staff_sEmail: "john2.smith2@whotsit.com"
    },
    {
      staff_staffN: 3456,
      staff_fName: "John3",
      staff_sName: "Smith4",
      staff_dept: "Vision Mixers",
      staff_seniority: "Junior",
      staff_fullTime: true,
      staff_pNumber: "+123 35678910",
      staff_sEmail: "john3.smith3@whotsit.com"
    }],
};

var view = {
  displayStaff: function() {  // There must be a quicker way than this!?
    var staffInfo = document.getElementById("staffInfo");
    staffInfo.innerHTML = "";
    
    var headTR = document.createElement("TR");
    
    var headName = document.createElement("TH");
    var headPhone = document.createElement("TH");
    var headNum = document.createElement("TH");
    var headDept = document.createElement("TH");
    var headSenior = document.createElement("TH");
    var headEmail = document.createElement("TH");
    var headFullTime = document.createElement("TH");
    
    var headNameText = document.createTextNode("Staff Name");
    var headPhoneText = document.createTextNode("Phone Number");
    var headNumText = document.createTextNode("Staff Number");
    var headDeptText = document.createTextNode("Department");
    var headSeniorText = document.createTextNode("Seniority");
    var headEmailText = document.createTextNode("Email Address");
    var headFullTimeText = document.createTextNode("Employment Status");
    
    staffInfo.appendChild(headTR);
    
    headName.appendChild(headNameText);
    headTR.appendChild(headName);
    
    headPhone.appendChild(headPhoneText);
    headTR.appendChild(headPhone);
    
    headNum.appendChild(headNumText);
    headTR.appendChild(headNum);
    
    headDept.appendChild(headDeptText);
    headTR.appendChild(headDept);
    
    headSenior.appendChild(headSeniorText);
    headTR.appendChild(headSenior);
    
    headEmail.appendChild(headEmailText);
    headTR.appendChild(headEmail);
    
    headFullTime.appendChild(headFullTimeText);
    headTR.appendChild(headFullTime);
    

    for (var i = 0; i < rotaOb.staff.length; i++) {
      var staff = rotaOb.staff[i];
      
      var staffTR = document.createElement("TR");
      
      var staffTdName = document.createElement("TD");
      var staffTdPhone = document.createElement("TD");
      var staffTdNum = document.createElement("TD");
      var staffTdDept = document.createElement("TD");
      var staffTdSenior = document.createElement("TD");
      var staffTdEmail = document.createElement("TD");
      var staffTdFullTime = document.createElement("TD");
      
      var staffName = document.createTextNode(staff.staff_fName + " " + staff.staff_sName);
      var staffPhone = document.createTextNode(staff.staff_pNumber);
      var staffNum = document.createTextNode(staff.staff_staffN);
      var staffDept = document.createTextNode(staff.staff_dept);
      var staffSenior = document.createTextNode(staff.staff_seniority);
      var staffEmail = document.createTextNode(staff.staff_sEmail);
      var staffFullTime = document.createTextNode(staff.staff_fullTime);
      
      staffInfo.appendChild(staffTR);
      
      staffTdName.appendChild(staffName);
      staffTR.appendChild(staffTdName);
      
      staffTdPhone.appendChild(staffPhone);
      staffTR.appendChild(staffTdPhone);
      
      staffTdNum.appendChild(staffNum);
      staffTR.appendChild(staffTdNum);  
      
      staffTdDept.appendChild(staffDept);
      staffTR.appendChild(staffTdDept);
      
      staffTdSenior.appendChild(staffSenior);
      staffTR.appendChild(staffTdSenior);
      
      staffTdEmail.appendChild(staffEmail);
      staffTR.appendChild(staffTdEmail);
      
      staffTdFullTime.appendChild(staffFullTime);
      staffTR.appendChild(staffTdFullTime);
    }
  }
};

Answer 1

如果将表的内容构建为 HTML 字符串，则可以使 JS 代码很多更短和更简单，也许就像我在下面显示的那样。

请注意，您应该尽量减少更新实际 DOM 的次数，因此在变量中构建字符串，然后对表的 .innerHTML 进行一次更改> 最后。

var view = {
  displayStaff: function() {
    var tableBodyHTML = "<tr><th>Staff Name</th><th>Phone Number</th><th>Staff Number</th><th>Department</th><th>Seniority</th><th>Email Address</th><th>Employment Status</th>";

    tableBodyHTML += rotaOb.staff.map(function(staff) {
      return "<tr><td>" + staff.staff_fName + " " + staff.staff_sName
           + "</td><td>" + staff.staff_pNumber
           + "</td><td>" + staff.staff_staffN
           + "</td><td>" + staff.staff_dept
           + "</td><td>" + staff.staff_seniority
           + "</td><td>" + staff.staff_sEmail
           + "</td><td>" + staff.staff_fullTime
           + "</td></tr>";
    }).join("");
		
    document.getElementById("staffInfo").innerHTML = tableBodyHTML;
  }
};

var rotaOb = {
  //It should have be able store staff
  staff: [{
      staff_staffN: 1234,
      staff_fName: "John",
      staff_sName: "Smith",
      staff_dept: "Cameras",
      staff_seniority: "senior",
      staff_fullTime: false,
      staff_pNumber: "+123 45678910",
      staff_sEmail: "john.smith@whotsit.com"
    },
    {
      staff_staffN: 2345,
      staff_fName: "John2",
      staff_sName: "Smith2",
      staff_dept: "Cameras",
      staff_seniority: "Junior",
      staff_fullTime: true,
      staff_pNumber: "+123 25678910",
      staff_sEmail: "john2.smith2@whotsit.com"
    },
    {
      staff_staffN: 3456,
      staff_fName: "John3",
      staff_sName: "Smith4",
      staff_dept: "Vision Mixers",
      staff_seniority: "Junior",
      staff_fullTime: true,
      staff_pNumber: "+123 35678910",
      staff_sEmail: "john3.smith3@whotsit.com"
    }]
};

view.displayStaff();

<table id="staffInfo"></table>

请注意，如果您采用原始代码的 .createElement() 方式，则最小化 DOM 更新的原则也适用。也就是说，在将单元格添加到行中之前，不要将动态创建的行附加到表中。