在js中将<th>添加到表中答案

【问题标题】：Adding <th> to the table in js在js中将<th>添加到表中
【发布时间】：2016-06-24 19:55:25
【问题描述】：

我正在尝试将<th> 标记添加到表中，但我无法添加。我想添加Id、Name 和Prof 作为表头。

var obj=[{id:"01",name:"Bob",prof:"Soft Engg"},{id:"02",name:"George",prof:"Admin"},{id:"03",name:"Paul",prof:"Front End"}];
var table = document.createElement("table");
table.setAttribute("id","myTable");
document.body.appendChild(table);

for(i=0;i<obj.length;i++) {
  var row = document.createElement("tr")
  table.appendChild(row);
  var head = document.createElement("th");
  row.appendChild(head);
  for (key in obj[i]) {
    var cell = document.createElement("td");
    row.appendChild(cell);
    cell.innerHTML = obj[i][key];
  }
}

【问题讨论】：

那么在第一次迭代时，您需要获取第一个对象的键并将它们用作TH单元格的内容。请注意，它们返回的顺序不一定稳定，因此您的标题可能与数据不一致。一个更好的主意是在 obj 中包含一个标题记录，它以正确的顺序排列它们，并指定相关的属性名称，以便将正确的数据放在正确的列中。

标签： javascript json html-table

【解决方案1】：

你可以这样做

var obj = [{
  id: "01",
  name: "Bob",
  prof: "Soft Engg"
}, {
  id: "02",
  name: "George",
  prof: "Admin"
}, {
  id: "03",
  name: "Paul",
  prof: "Front End"
}];
var table = document.createElement("table");
table.setAttribute("id", "myTable");
document.body.appendChild(table);

// check array length
if (obj.length) {
  // create row for table head
  var row = document.createElement("tr")
  // append it to table
  table.appendChild(row);
  // get kesys from first object and iterate
  Object.keys(obj[0]).forEach(function(v) {
    // create th
    var cell = document.createElement("th");
    // append to tr
    row.appendChild(cell);
    // update th content as key value
    cell.innerHTML = v;
  });
}

for (var i = 0; i < obj.length; i++) {
  var row = document.createElement("tr")
  table.appendChild(row);
  for (key in obj[i]) {
    var cell = document.createElement("td");
    row.appendChild(cell);
    cell.innerHTML = obj[i][key];
  }
}

【讨论】：

工作得很好，谢谢兄弟:)
@Raja : 乐于助人

【解决方案2】：

我一直在想这篇文章并将其用作 JS 实践，我开始：

var obj=[
{id:"01",name:"Bob",prof:"Soft Engg"},
{id:"02",name:"George",prof:"Admin"},
{id:"03",name:"Paul",prof:"Front End"}
];

var headers=['id','name','prof'];

var table = document.createElement("table");
table.setAttribute("id","myTable");
document.body.appendChild(table);

var tableHeader = document.createElement("thead");
table.appendChild(tableHeader);
tableHeaderRow = document.createElement("tr");
table.appendChild(tableHeaderRow);
for(i=0;i<headers.length;i++){
        var tableHeader = document.createElement("th");
        tableHeaderRow.appendChild(tableHeader);
        tableHeader.innerHTML = headers[i]
}

var tableBody = document.createElement("tbody");
  table.appendChild(tableBody);
 for(i=0;i<headers.length;i++){
    var tbodyrows=document.createElement("tr");
 for (key in obj[i]) {
    tableBody.appendChild(tbodyrows);
    var cell = document.createElement("td");
    tbodyrows.appendChild(cell);
    cell.innerHTML = obj[i][key];
  }
}

【讨论】：