CODEWITHSUNDEEP
javascriptjsonhtml-table
Raja O
Raja O

Reputation: 644

Adding <th> to the table in js

I'm trying to add <th> tag to the table, but I am not able to add. I want to add Id, Name and Prof as a table header.

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

Upvotes: 2

Views: 4448

Answers (2)

fndg87
fndg87

Reputation: 331

I couldn't stop thinking about this post and use it as JS practice, here I go:

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

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115242

You can do something like this

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

Upvotes: 2

Related Questions