title: Table will not add with jquery
body: <p>I'm trying to add a table that will enable each cell to turn a color when clicked (like a pixel grid), but i'm having a bit of a difficult time trying to assign the data from a form to a jQuery variable.</p>
  
  <p>I haven't had any problems with any syntax as there aren't any errors thrown up</p>
  
  <p>To generate the table, I don't really know how to do this in jquery, so I just used regular vanilla js instead.</p>
  
  <p>Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    var color, height, width;
  
  
    function makeGrid(){
      var table = $('pixel_canvas');
      height = $("#input_height").val();
      width = $("#input_width").val();
      color = $("#colorPicker").val();
      console.log(color);
      console.log(width);
      console.log(height);
      for (var i = 0; i&lt;height; i++){
        row = table.insertRow(i);
        for(var j = 0; j&lt;width; j++){
          pixel = row.insertCell(j);
          $(pixel).css({
            'border': 'black solid 1px'
          });
          console.log(pixel);
          $(pixel).on("click", function(){
            $(this).css({'background-color':'color'});
          })
        }
      }
    }
  
    $("#sizePicker").on('submit', function(){
      makeGrid();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      text-align: center;
  }
  
  h1 {
      font-family: Monoton;
      font-size: 70px;
      margin: 0.2em;
  }
  
  h2 {
      margin: 1em 0 0.25em;
  }
  
  h2:first-of-type {
      margin-top: 0.5em;
  }
  
  table,
  tr,
  td {
      border: 1px solid black;
  }
  
  table {
      border-collapse: collapse;
      margin: 0 auto;
  }
  
  tr {
      height: 20px;
  }
  
  td {
      width: 20px;
  }
  
  input[type=number] {
      width: 6em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Pixel Art Maker!&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Pixel Art Maker&lt;/h1&gt;
  
      &lt;h2&gt;Choose Grid Size&lt;/h2&gt;
      &lt;form id="sizePicker"&gt;
          Grid Height:
          &lt;input type="number" id="input_height" name="height" min="1" value="1"&gt;
          Grid Width:
          &lt;input type="number" id="input_width" name="width" min="1" value="1"&gt;
          &lt;input type="submit"&gt;
      &lt;/form&gt;
  
      &lt;h2&gt;Pick A Color&lt;/h2&gt;
      &lt;input type="color" id="colorPicker"&gt;
  
      &lt;h2&gt;Design Canvas&lt;/h2&gt;
      &lt;table id="pixel_canvas"&gt;&lt;/table&gt;
  
      &lt;script src="designs.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>