title: Dynamically creating an html table with Javascript
body: <p>I am trying to create a table based on user input (actually two or three tables depending on the user input..) using Javascript, I am very much native to PHP and have already got this working in PHP, however i would like the user to be able to see the table before the query it. I found a script on here that partially did what I wanted and have attempted to edit it (I found it surprisingly similar to PHP) Basically it calculates the total amount of cells (ports) splits it by rows and columns, the "super" column is used if the user would like it to be split into multiple tables, which align next to each other, hence the div tag. Here's my JS:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  function createTable()
  {
  var num_ports = document.getElementById('ports').value;
  var num_super = document.getElementById('super').value;
  var num_rows = document.getElementById('rows').value;
  var num_cols = document.getElementById('cols').value;
  var tbody = '';
  var colStart = num_cols / num_super;
  for( var i=0; i&lt;num_super; i++){
      var theader = '&lt;div&gt;&lt;table border="1"&gt;\n';
          for(u=1; u&lt;=num_row; u++){
            tbody += '&lt;tr&gt;';
              for( var j=0; j&lt;colStart; j++)
              {
              tbody += '&lt;td&gt;';
              tbody += 'Cell ' + i + ',' + j;
              tbody += '&lt;/td&gt;'
              }
      tbody += '&lt;/tr&gt;\n';
  }
  var tfooter = '&lt;/table&gt;&lt;/div&gt;';
  document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form name="tablegen"&gt;
  &lt;label&gt;Ports: &lt;input type="text" name="ports" id="ports"/&gt;&lt;/label&gt;&lt;br /&gt;
  &lt;label&gt;Super Columns: &lt;input type="text" name="super" id="super"/&gt;&lt;/label&gt;&lt;br /&gt;
  &lt;label&gt;Rows: &lt;input type="text" name="rows" id="rows"/&gt;&lt;/label&gt;&lt;br /&gt;
  &lt;label&gt;Columns: &lt;input type="text" name="cols" id="cols"/&gt;&lt;/label&gt;&lt;br/&gt;
  &lt;input name="generate" type="button" value="Create Table!" onclick='createTable();'/&gt;
  &lt;/form&gt;
  
  &lt;div id="wrapper"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is what the final output looks like after it has been processed by PHP (ports:24, col:6, rows:2, super:2):</p>
  
  <p><img src="https://i.stack.imgur.com/14Hfj.png" alt="table"></p>
  
  <p>Here is a js fiddle that I threw together:
  <a href="http://jsfiddle.net/9SnLB/" rel="nofollow noreferrer">http://jsfiddle.net/9SnLB/</a></p>
  
  <p>Currently, when I click the button nothing happens, but, I suppose that is my first issue, but am I going about the setup correctly? Why wont the button run the function? </p>