使用JavaScript将Json转换为html表

我是JavaScript新手。我需要使用JavaScript将下面的JSON解析为html，这样一来，表1首先应该是可见的，如果我单击类12A，那么它应该在显示表1和12A详细信息的相同位置显示表2。从表2中，如果我单击staff name，那么它应该在显示表3的相同位置显示表3。有人能用逻辑来指导我吗

表1

表2

表3

var schoolInfo={ 学校：[{ 班级：12A， 总数：75， 工作人员：[{ 员工姓名：斯特拉， 年龄:31岁， 员工详情：[{ 总数:3,， 学位：硕士 }] }] }, { 类别：12B， 总数：20， 工作人员：[{ 员工姓名：莫里斯， 总数：20， 员工详情：[{ 总数:3,， 学位：硕士 }] }] }] } //创建表格； var table=document.createElement'table'； table.setAttributeclass，border_类； var tr=表1.insertRow-1； //创建标题行 var headerRow=[]； 学校信息中的forvar键{ //console.logschoolInfo.school[key]； ifschoolInfo.school[key].hasOwnProperty'class'和&schoolInfo.school[key].hasOwnProperty'total'{ 头像。推“类”； headerRow.推送“总计”； 打破 } } //将标题行追加到tr tage

---

forvar i=0；i+1@桑迪普。谢谢你的回答。对于一行来说，它确实工作得很好，但是您能帮助我指导我如何继续单击12A类返回表2吗。非常感谢您的建议！！

{
  "school" : [{
    "class" : "12A",
    "total" : "75",
    "staff" : [{
        "staffName" : "Stella", 
        "age" : "31",
        "staffDetails" : [{
          "totalClassTaken" : "3",
          "degree" : "Masters"
        }]
    }]
  },
  {
    "Class" : "12B",
    "total" : "75",
    "staff" : [{
      "staffName" : "Morris", 
      "total" : "20",
      "staffDetails" : [{
        "totalClassTaken" : "3",
        "degree" : "Masters"
      }]   
  }]
  }]
}