Display JavaScript table on the load of a html web page

html, javascript

Solution

You have a few problems:

In your loop `for (var i = 0; i < ORDER.length; i++) {` should be `for (var i = 0; i < ORDER.orders.length; i++) {`

`refArray`, `growerArray`, `itemArray` are undefined

- You are not appending the `td`s to the `tr`

Be sure to look at https://developer.chrome.com/devtools/docs/javascript-debugging and to check your console for errors.

The following example adds the table after the page is loaded, and also when you click the button.

var ORDER = {
  orders: []
};

function Order(ref, grower, item) {
  this.order_reference = ("o" + ref);
  this.grower_reference = grower;
  this.item_ordered = item;
}

var order1 = new Order(1, "grower2", "item");
ORDER.orders.push(order1);

function addTable(orders) {
  var table = document.createElement("TABLE");
  table.setAttribute("id", "myTable");
  document.body.appendChild(table);

  for (var i = 0; i < orders.length; i++) {
    var order = orders[i];
    var row = document.createElement("TR");

    var refCell = document.createElement("TD");
    var growerCell = document.createElement("TD");
    var itemCell = document.createElement("TD");

    row.appendChild(refCell);
    row.appendChild(growerCell);
    row.appendChild(itemCell);

    var ref = document.createTextNode(order.order_reference);
    var grower = document.createTextNode(order.grower_reference);
    var item = document.createTextNode(order.item_ordered);

    refCell.appendChild(ref);
    growerCell.appendChild(grower);
    itemCell.appendChild(item);

    table.appendChild(row);
    document.body.appendChild(document.createElement('hr'));
  }
}

window.addEventListener('load', function() {
  addTable(ORDER.orders)
});

<div id="wrapper">
  <div id="mytable"></div>
  <div id="footer">
    <table id="footer" style="width: 100%">
      <tr>
        <td valign="bottom">Company Name
          <br />Tel Num
          <br />Location, Postcode</td>
        <td>
          <button onclick="addTable(ORDER.orders)">Click me</button>
        </td>
        <td align="right" valign="bottom">
          <a href="#">Home</a> &nbsp;<a href="#">About</a> &nbsp;<a href="#">Help</a> &nbsp;<a href="#">Contact</a>
        </td>
      </tr>
    </table>
  </div>
</div>

<hr />

Problem

I am trying to display a populated table on a html page using javascript. This is what I have so far: table.js - contains my function and data for the table ``` var ORDER = { orders: [] }; function Order(ref, grower, item) { this.order_reference = ("o" + ref); this.grower_reference = grower; this.item_ordered = item; } var order1 = new Order(1, "grower2", "item"); ORDER.orders.push(order1); function addTable(){ var table = document.createElement("TABLE"); table.setAttribute("id", "myTable"); document.body.appendChild(table); for (var i=0; i<ORDER.length; i++) { var row = document.createElement("TR"); var refCell = document.createElement("TD"); var growerCell = document.createElement("TD"); var itemCell = document.createElement("TD"); var ref = document.createTextNode(refArray[i]); var grower = document.createTextNode(growerArray[i]); var item = document.createTextNode(itemArray[i]); refCell.appendChild(ref); growerCell.appendChild(grower); itemCell.appendChild(item); table.appendChild(row); } } ``` html page ``` <!DOCTYPE html> <html lang = "en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body id="contracts"> <div id="wrapper"> <div id="mytable"> </div> </div> <div id="footer"> <table id= "footer" style="width: 100%"> <tr> <td valign="bottom">Company Name <br> Tel Num <br> Location, Postcode</td> <td> <button onclick="addTable()"> Click me </button></td> <td align="right" valign="bottom"><a href="#"><a href="#">Home</a> &nbsp; <a href="#"><a href="#">About</a> &nbsp; <a href="#"><a href="#">Help</a> &nbsp; <a href="#"><a href="#">Contact</a></td> </tr> </table> </div> </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="table.js"></script> </body> </html> ``` Firstly, I wanted to display the table on the click of a button. Secondly, I want to display the table as soon as the html page is loaded. How would I go about this? Sorry if its not a good question, or if there is lots missing. I'm quite new to this so sort of just using different tutorials and putting stuff together ...

Original source