CODEWITHSUNDEEP
javascript
saum
saum

Reputation: 343

creating table using JavaScript

I am trying to create a table using javascript and populating JSON data but I can't get it to work properly. I want to create five columns and four rows.

so far I have created the header, but I need some help populating the body when I create the populatebody function and try to insert the names. The names appear in a row instead of columns.

var staffs = [
    {"name": "James", "gender": "male", "dateofbirth":2011, "joined": "1997", "num_hires": 24000},
    {"name": "Anna", "gender": "female", "dateofbirth": 2013, "joined": "1980", "num_hires": 12000},
    {"name": "Ken", "gender": "male", "dateofbirth": 2013, "joined": "1980", "num_hires": 13000},
    {"name": "Tom", "gender": "male", "dateofbirth": 203, "joined": "1995", "num_hires": 12500}
];


function createheader() {
  var table = document.getElementById("header");
  var header = table.createTHead(table);
  var row = header.insertRow(0);

  var head = ["Name", "Gender", "Date of Birth", "join year", " Rentals"];
  for (let i = 0; i < head.length; i++) {
    let cell = document.createElement("td");
    cell.innerText = head[i];
    row.append(cell);
  }
}


function populatebody() {
  var table = document.getElementById("details");
  var tbody = table.createTBody(table);
  var row = tbody.insertRow(0);

  for (var i = 0; i < staffs.length; i++) {
    let cell = document.createElement("td");
    cell.innerHTML = staffs[i].name;
    row.append(cell);
  }
}

Upvotes: 1

Views: 812

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115212

Create a row within the loop, generate raw HTML cells(td elements) and update the content of the raw element(tr).

var staffs = [
    {"name": "James", "gender": "male", "dateofbirth":2011, "joined": "1997", "num_hires": 24000},
    {"name": "Anna", "gender": "female", "dateofbirth": 2013, "joined": "1980", "num_hires": 12000},
    {"name": "Ken", "gender": "male", "dateofbirth": 2013, "joined": "1980", "num_hires": 13000},
    {"name": "Tom", "gender": "male", "dateofbirth": 203, "joined": "1995", "num_hires": 12500}
];

function createheader() {
  var table = document.getElementById("table");
  var header = table.createTHead(table);
  var row = header.insertRow(0);

  var head = ["Name", "Gender", "Date of Birth", "join year", " Rentals"];
  for (let i = 0; i < head.length; i++) {
    let cell = document.createElement("td");
    cell.innerText = head[i];
    row.append(cell);
  }
}

function populatebody() {
  var table = document.getElementById("table");
  var tbody = table.createTBody(table);

  for (var i = 0; i < staffs.length; i++) {

    var row = tbody.insertRow(0);
    row.innerHTML = `
    <td>${staffs[i].name}</td>
    <td>${staffs[i].gender}</td>
    <td>${staffs[i].dateofbirth}</td>
    <td>${staffs[i].joined}</td>
    <td>${staffs[i].num_hires}</td>
    `;
  }
}

createheader();
populatebody();
<table id="table"></table>

Upvotes: 2

Related Questions