title: Create HTML table using Javascript
body: <p>My question will ultimately be related to this site:</p>
  
  <p><a href="http://dbtest.net16.net/ethanol-01.html" rel="noreferrer">http://dbtest.net16.net/ethanol-01.html</a></p>
  
  <p>EDIT: View unencrypted page source code here >>> <a href="http://dbtest.net16.net/ethanol-22.html" rel="noreferrer">http://dbtest.net16.net/ethanol-22.html</a></p>
  
  <p>This is an HTML form with results calculated using JavaScript.  My goal is to display a table of 2-6 columns and variable number of rows depending on user input (form would be modified).  My problem is that I am not fully understanding how to get the table created in JavaScript after the user clicks the Calculate button.  I have found some potential good answers but apparently don't fully understand it all.  Running the following code is somewhat like what I want my output to display.</p>
  
  <pre><code>&lt;html&gt;
      &lt;!-- http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm --&gt;
  
      &lt;head&gt;
          &lt;title&gt;Table of Numbers&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
           &lt;h1&gt;Table of Numbers&lt;/h1&gt;
  
          &lt;table border="0"&gt;
              &lt;script language="javascript" type="text/javascript"&gt;
                  &lt;!--
  
                  var myArray = new Array();
                  myArray[0] = 1;
                  myArray[1] = 2.218;
                  myArray[2] = 33;
                  myArray[3] = 114.94;
                  myArray[4] = 5;
                  myArray[5] = 33;
                  myArray[6] = 114.980;
                  myArray[7] = 5;
  
                  document.write("&lt;tr&gt;&lt;td style='width: 100px; color: red;'&gt;Col Head 1&lt;/td&gt;");
                  document.write("&lt;td style='width: 100px; color: red; text-align: right;'&gt;Col Head 2&lt;/td&gt;");
                  document.write("&lt;td style='width: 100px; color: red; text-align: right;'&gt;Col Head 3&lt;/td&gt;&lt;/tr&gt;");
  
                  document.write("&lt;tr&gt;&lt;td style='width: 100px;'&gt;---------------&lt;/td&gt;");
                  document.write("&lt;td style='width: 100px; text-align: right;'&gt;---------------&lt;/td&gt;");
                  document.write("&lt;td style='width: 100px; text-align: right;'&gt;---------------&lt;/td&gt;&lt;/tr&gt;");
  
                  for (var i = 0; i &lt; 8; i++) {
                      document.write("&lt;tr&gt;&lt;td style='width: 100px;'&gt;Number " + i + " is:&lt;/td&gt;");
                      myArray[i] = myArray[i].toFixed(3);
                      document.write("&lt;td style='width: 100px; text-align: right;'&gt;" + myArray[i] + "&lt;/td&gt;");
                      document.write("&lt;td style='width: 100px; text-align: right;'&gt;" + myArray[i] + "&lt;/td&gt;&lt;/tr&gt;");
                  }
  
                   //--&gt;
              &lt;/script&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>If I can get the test table to be created and populated with my test data using my actual javascript file, then I should then be able to figure the rest myself (I think).</p>
  
  <p>Following are a couple of the best answers I could find so far:</p>
  
  <p><a href="http://jsfiddle.net/drewnoakes/YAXDZ/" rel="noreferrer">http://jsfiddle.net/drewnoakes/YAXDZ/</a></p>
  
  <p>The above link originated in stackoverflow but I can't seem to find the original post at this time.</p>
  
  <p><a href="http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm" rel="noreferrer">http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm</a></p>
  
  <p>Any help is appreciated.  Simpler is better due to my limited experience.  </p>