如何使用JSON数据和JavaScript创建HTML表

我目前正在一个网站上工作，该网站导入JSON数据并在HTML中填充表格。
我在遍历数组以显示表中的所有数据时遇到问题。目前，表中仅显示部分JSON数据，而其他数据仅显示为表外的文本

我已经尝试使用JSON数据中的键作为表头，但我只需要选择几个头

var表=
{“雇员”：
[{“开始”：“2016年”
“部门”：“工程”
“雇员”：
[{“id”：“a101”，“名字”：“艾伦”，“姓氏”：“阿尔金”}
，{“id”：“a102”，“名字”：“杰夫”，“姓氏”：“基冈”}
] 
} 
，{“开始”：“2016年”
“部门”：“研发”
“雇员”：
[{“id”：“a103”，“名字”：“米歇尔”，“姓氏”：“琼斯”}
，{“id”：“a104”，“名字”：“彼得”，“姓氏”：“史密斯”}
] 
} 
] 
} 
var Employees=表.Employees
//这段代码遍历colorArray并编写html代码以将颜色信息放入表中。
var colornfo=“”；
colorInfo+=“StartedDepartmentIDName”；
对于（变量i=0；i

body{font size:16px；字体系列：Arial、Helvetica、sans serif；}
表{边框折叠：折叠；}
td{边框：1px纯灰；填充：2px 10px；}
{背景色：绿松石；}

---

..

不要使用

.innerHTML

方法，这是出现问题的最佳方式。有许多方法可以在javascript中创建DOM，这还简化了解释器，在正确的位置自动关闭每个标记，并提供更快的代码执行

.innerHTML

是个魔鬼！（对于简单的文本内容，更喜欢

.textContent

）

例如：

const表=
{“雇员”：
[{“开始”：“2016年”
“部门”：“工程”
“雇员”：
[{“id”：“a101”，“名字”：“艾伦”，“姓氏”：“阿尔金”}
，{“id”：“a102”，“名字”：“杰夫”，“姓氏”：“基冈”}
] 
} 
，{“开始”：“2016年”
“部门”：“研发”
“雇员”：
[{“id”：“a103”，“名字”：“米歇尔”，“姓氏”：“琼斯”}
，{“id”：“a104”，“名字”：“彼得”，“姓氏”：“史密斯”}
] 
} 
] 
} 
让MyTable=文档
.querySelector（“#id01”）
.appendChild（document.createElement（'table'））
对于（让表的开始步骤。员工）
{
对于（让StartDep.员工的员工）
{
设nRow=MyTable.insertRow（-1）
，rCell=0
nRow.insertCell（rCell++）.textContent=StartDep.Started
nRow.insertCell（rCell++）.textContent=StartDep.Department
nRow.insertCell（rCell++）.textContent=Employee.id
nRow.insertCell（rCell++）.textContent=`${Employee.firstname}${Employee.姓氏}`
}
}
让Rowhead=MyTable.createTHead（）.insertRow（-1）
'已开始，部门，ID，名称'.split（'，'））
.forEach（（T，i）=>Rowhead.insertCell（i）.textContent=T）

body{font size:16px；字体系列：Arial、Helvetica、sans serif；}
表{边框折叠：折叠；}
td{边框：1px纯灰；填充：2px 10px；}
背景色：绿松石；}

---

您的表未正确显示，因为在第一个Employees for循环中有“close table element”和“add to div element”语句。将这些元素移到循环之外，它就会工作。

使用创建和插入HTMLTableElement更改了我的答案