Question

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

正如你所看到的，我目前的做法似乎有点荒谬。我是一个新手，我无法通过循环找到一种简单的方法。

＆＃13;

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

＆＃13;

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更新的原则也适用。也就是说，在之后将单元格添加到行中之前，不要将动态创建的行追加到表中。

Answer 2

有一些方法可以更容易地使用DOM表：

createTHead();
insertRow();
insertCell();

还有一些你可以查看here

使用这些函数看起来像这样：

funtion() {
    var table = document.createElement("TABLE");
    var header = table.creatTHead();
    var headerRow = head.insertRow(0);
    headrRow.insertCell(0).innerText("Staff Name");
    headrRow.insertCell(1).innerText("Phone Number");
    headrRow.insertCell(2).innerText("Staff Number");
    headrRow.insertCell(3).innerText("Department");
    headrRow.insertCell(4).innerText("Seniority");
    headrRow.insertCell(5).innerText("Email Address");
    headrRow.insertCell(6).innerText("Employment Status");

    for (var i = 0; i < rotaOb.staff.length; i++) {
        var staff = rotaOb.staff[i];

        var staffRow = table.instertRow(i+1);
        staffRow.insertCell(0).innerText(staff.staff_fName + " " + staff.staff_sName);
        staffRow.insertCell(1).innerText(staff.staff_pNumber);
        staffRow.insertCell(2).innerText(staff.staff_staffN);
        staffRow.insertCell(3).innerText(staff.staff_dept);
        staffRow.insertCell(4).innerText(staff.staff_seniority);
        staffRow.insertCell(5).innerText(staff.staff_sEmail);
        staffRow.insertCell(6).innerText(staff.staff_fullTime);
    }
}

Answer 3

nnnnnnnnn的代码示例很不错，但也看看如何用文档片段做同样的事情（createDocumentFragment（））。

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

3 个答案: