Question

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

现在我的问题是汽车的名称出现在一列而不是一行（例如，它们应该是每列的表头）。但我还没能弄明白。你的帮助将不胜感激。

这是html

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

</table>

现在看起来像什么的链接 enter image description here

但这就是我想要它的样子 enter image description here

Answer 1

嗨试试这个会起作用。

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

    }

}

Answer 2

嗨，我测试了这个并且它有效。它将首先添加名称作为顶行，然后根据需要插入行并将汽车类型添加到相应的列

<!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>

我正在创建一个表，其中的数据来自JSON文件。这是代码

2 个答案: