Javascript I'；我正在创建一个表，其中的数据是从JSON文件中获取的。这是密码 var myObj，i，t=document.querySelector（“数据表”）； myObj={ 姓名：“约翰”， 年龄:30,， 汽车：[ {名称：“福特”，车型：[“嘉年华”、“福克斯”、“野马”]}， {名称：“宝马”，型号：[“320”、“X3”、“X5”]}， {名称：“菲亚特”，型号：[“500”，“熊猫”]} ] }; 对于（我在myObj.cars中）{ var _row=t.insertRow（-1）； var c=_row.insertCell（-1）； c、 innerHTML=myObj.cars[i].name； c、 style.fontwweight=“粗体”； 对于（var j=0；jrowCount）{ rowCount=myObj.cars[i].models.length； } } //添加标题行 var headerRow=t.insertRow（-1）； 对于（我在myObj.cars中）{ var c=头错误插入单元（-1）； c、 innerHTML=myObj.cars[i].name； c、 style.fontwweight=“粗体”； } //添加详细信息行和单元格 对于（var j=0；j

我现在的问题是，汽车的名称显示在一列中，而不是一行中（例如，它们应该是每列的表头）。但我一直没能弄明白。谢谢你的帮助

这是html

var myObj, i, t = document.querySelector("#data_table");

myObj = {
name: "John",
age: 30,
cars: [
{name: "Ford", models: ["Fiesta", "Focus", "Mustang"]},
{name: "BMW", models: ["320", "X3", "X5"]},
{name: "Fiat", models: ["500", "Panda"]}
]

};

for (i in myObj.cars) {
var _row = t.insertRow(-1);


var c = _row.insertCell(-1);
c.innerHTML = myObj.cars[i].name;
c.style.fontWeight = "bolder";

for (var j = 0; j < myObj.cars[i].models.length; j++) {
var _c = _row.insertCell(-1);
_c.innerHTML = myObj.cars[i].models[j];
}
}

车辆数据

它现在看起来像什么的链接

但这就是我想要的样子

---

嗨，试试这个，它会有用的

var myObj，i，t=document.querySelector（“数据表”）；
myObj={
姓名：“约翰”，
年龄:30,，
汽车：[{
姓名：“福特”，
车型：[“嘉年华”、“焦点”、“野马”]
},
{
名称：“宝马”，
型号：[“320”、“X3”、“X5”]
},
{
名称：“菲亚特”，
型号：[“500”，“熊猫”]
}
]
};
//确定表中要绘制的最大行数（标题除外）
var rowCount=0；
对于（我在myObj.cars中）{
if（myObj.cars[i].models.length>rowCount）{
rowCount=myObj.cars[i].models.length；
}
}
//添加标题行
var headerRow=t.insertRow（-1）；
对于（我在myObj.cars中）{
var c=头错误插入单元（-1）；
c、 innerHTML=myObj.cars[i].name；
c、 style.fontwweight=“粗体”；
}
//添加详细信息行和单元格
对于（var j=0；j

您好，我测试了这个，它运行正常。它将首先添加名称作为顶行，然后根据需要插入行，并将汽车类型添加到相应的列中

var myObj, i, t = document.querySelector("#data_table");

myObj = {
    name: "John",
    age: 30,
    cars: [{
            name: "Ford",
            models: ["Fiesta", "Focus", "Mustang"]
        },
        {
            name: "BMW",
            models: ["320", "X3", "X5"]
        },
        {
            name: "Fiat",
            models: ["500", "Panda"]
        }
    ]

};

//Determine the max rows to draw (except the header) in the table
var rowCount = 0;
for (i in myObj.cars) {
    if (myObj.cars[i].models.length > rowCount) {
        rowCount = myObj.cars[i].models.length;
    }
}
//Add header row
var headerRow = t.insertRow(-1);
for (i in myObj.cars) {
    var c = headerRow.insertCell(-1);
    c.innerHTML = myObj.cars[i].name;
    c.style.fontWeight = "bolder";
}

//Add details rows and cells
for (var j = 0; j < rowCount; j++) {
    var _row = t.insertRow(-1);

    //Add cells for each row
    for (i in myObj.cars) {
        var _c = _row.insertCell(i);
        if (myObj.cars[i].models[j]) {
            _c.innerHTML = myObj.cars[i].models[j];
        }

    }

}

车辆数据
var myObj，i，t=document.querySelector（“数据表”）；
myObj={
姓名：“约翰”，
年龄:30,，
汽车：[
{名称：“福特”，车型：[“嘉年华”、“福克斯”、“野马”]}，
{名称：“宝马”，型号：[“320”、“X3”、“X5”]}，
{名称：“菲亚特”，型号：[“500”，“熊猫”]}
]
};
var_row1=t.insertRow（-1）；
对于（我在myObj.cars中）{
var c=_row1.insertCell（-1）；
c、 innerHTML=myObj.cars[i].name；
c、 style.fontwweight=“粗体”；
}
var-topcount=0；
对于（i=0；i

请提供预期html结构的示例，我刚刚更新了它，并提供了指向html结构外观和我希望它外观的链接。您好@seyi您尝试过答案吗？你能检查一下它是否正确吗

var myObj, i, t = document.querySelector("#data_table");

myObj = {
    name: "John",
    age: 30,
    cars: [{
            name: "Ford",
            models: ["Fiesta", "Focus", "Mustang"]
        },
        {
            name: "BMW",
            models: ["320", "X3", "X5"]
        },
        {
            name: "Fiat",
            models: ["500", "Panda"]
        }
    ]

};

//Determine the max rows to draw (except the header) in the table
var rowCount = 0;
for (i in myObj.cars) {
    if (myObj.cars[i].models.length > rowCount) {
        rowCount = myObj.cars[i].models.length;
    }
}
//Add header row
var headerRow = t.insertRow(-1);
for (i in myObj.cars) {
    var c = headerRow.insertCell(-1);
    c.innerHTML = myObj.cars[i].name;
    c.style.fontWeight = "bolder";
}

//Add details rows and cells
for (var j = 0; j < rowCount; j++) {
    var _row = t.insertRow(-1);

    //Add cells for each row
    for (i in myObj.cars) {
        var _c = _row.insertCell(i);
        if (myObj.cars[i].models[j]) {
            _c.innerHTML = myObj.cars[i].models[j];
        }

    }

}

<!DOCTYPE html>
<html>

<body>
<table width="100%" id="data_table" class="table table-condensed table-hover">
<caption> VEHICLE DATA </caption>

</table>
</script>
<script>

var myObj, i, t = document.querySelector("#data_table");

myObj = {
  name: "John",
  age: 30,
  cars: [
   {name: "Ford", models: ["Fiesta", "Focus", "Mustang"]},
   {name: "BMW", models: ["320", "X3", "X5"]},
   {name: "Fiat", models: ["500", "Panda"]}
  ]
};

var _row1 = t.insertRow(-1);
for (i in myObj.cars) {
  var c = _row1.insertCell(-1);
  c.innerHTML = myObj.cars[i].name;
  c.style.fontWeight = "bolder";
}

var topcount = 0;
for (i=0; i < myObj.cars.length; i++) {

  for (var j = 0; j < myObj.cars[i].models.length; j++) {
    if (topcount <= j) {
      var _row = t.insertRow(-1);
      topcount++;
      if(i > 0){
        for( var k = 0; k < i; k++){
          var _c = _row.insertCell(-1);
        }
      }
    } else {
      _row = t.rows[j+1];
    }
    var _c = _row.insertCell(-1);
    _c.innerHTML = myObj.cars[i].models[j];
  }

}

</script>

</body>
</html>