Javascript populate table

Question

How can I populate a table with javascript in the proper way?

function loadTableData() {

  //0: Date
  //1: Name

  var row = document.getElementById("test");

  var x = row.insertCell(0);
  x.innerHTML = "10/17/2018";

  var x = row.insertCell(1);
  x.innerHTML = "john doe";

}

<table id="myTable" class="table table-borderless table-striped table-earning">
  <thead>
    <tr>
      <th>date</th>
      <th>file name</th>
    </tr>
  </thead>
  <tbody>
    <tr id="test"></tr>
  </tbody>
</table>
<script>loadTableData();</script>

My current code populates the first two cells but I would like to move to the next column and populate another two cells. Im not sure how to do this the correct way.

Current output

Answer 1

The trick is to loop over your data and use insertRow to create a row before you insert the data. You can see that the tbody element is empty in this example and each tr element is created dynamically.

<table id="myTable" class="table table-borderless table-striped table-earning">
  <thead>
    <tr>
      <th>date</th>
      <th>file name</th>
    </tr>
  </thead>
  <tbody id="testBody"></tbody>
</table>
<script>
  const items1 = [
    { date: "10/17/2018", name: "john doe" },
    { date: "10/18/2018", name: "jane doe" },
  ];
  const items2 = [
    { date: "10/17/2019", name: "john doe" },
    { date: "10/18/2019", name: "jane doe" },
  ];
  function loadTableData(items) {
    const table = document.getElementById("testBody");
    items.forEach( item => {
      let row = table.insertRow();
      let date = row.insertCell(0);
      date.innerHTML = item.date;
      let name = row.insertCell(1);
      name.innerHTML = item.name;
    });
  }
  loadTableData(items1);
  loadTableData(items2);
  loadTableData([]);
</script>

Answer 2

As the other responder mentioned, you need to work with the document using the DOM. Treat everything as the elements they are in HTML.

var table = document.getElementById("myTable");

var rowNode = document.createElement("tr");
var cellNode = document.createElement("td");
var textNode = document.createTextNode("John Doe");

cellNode.appendChild(textNode);
rowNode.appendChild(cellNode);
table.appendChild(rowNode);

For further interactions with a table DOM element, the W3C spec (DOM Interface) is a good reference.