title: Display JavaScript table on the load of a html web page
body: <p>I am trying to display a populated table on a html page using javascript.</p>
  
  <p>This is what I have so far:</p>
  
  <p>table.js - contains my function and data for the table</p>
  
  <pre><code>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&lt;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);            
      }
  }
  </code></pre>
  
  <p>html page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html lang = "en"&gt;
           &lt;head&gt;
               &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&gt;
               &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
           &lt;/head&gt;
  
           &lt;body id="contracts"&gt;
               &lt;div id="wrapper"&gt;
                   &lt;div id="mytable"&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
               &lt;div id="footer"&gt;
                   &lt;table id= "footer" style="width: 100%"&gt;
                       &lt;tr&gt;
                           &lt;td valign="bottom"&gt;Company Name &lt;br&gt; Tel Num &lt;br&gt; Location, Postcode&lt;/td&gt; 
                           &lt;td&gt; &lt;button onclick="addTable()"&gt; Click me &lt;/button&gt;&lt;/td&gt; 
                           &lt;td align="right" valign="bottom"&gt;&lt;a href="#"&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &amp;nbsp; &lt;a href="#"&gt;&lt;a href="#"&gt;About&lt;/a&gt; &amp;nbsp; &lt;a href="#"&gt;&lt;a href="#"&gt;Help&lt;/a&gt; &amp;nbsp; &lt;a href="#"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/td&gt; 
                       &lt;/tr&gt;    
                   &lt;/table&gt;
               &lt;/div&gt;
           &lt;/div&gt; 
  
           &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
           &lt;script src="http://getbootstrap.com/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;        
           &lt;script type="text/javascript" src="table.js"&gt;&lt;/script&gt;
      &lt;/body&gt;   
  &lt;/html&gt; 
  </code></pre>
  
  <p>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. </p>
  
  <p>How would I go about this? </p>
  
  <p>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 ...</p>