title: Javascript / jQuery: How to dynamically add rows to table body (using arrays)
body: <p>I am new to Javascript and hope someone here can help me with this. </p>
  
  <p>I have an HTML page with a table on it and would like to <strong>use JS to dynamically add rows with certain content to the table's body</strong>. </p>
  
  <p>So far I have the below code which is shortened here (in reality there are more rows and columns etc.) which is causing me the following issues: </p>
  
  <ol>
  <li>When I run this it inserts the dynamic HTML above the table instead
  of inside the table's body.</li>
  <li>It does not apply any styles to it (which are defined by the classes
  in my CSS) so it just shows the cells' content without applying
  border or column width styles etc. Do I have to tell it somehow that
  it has to apply the CSS styles to this as well ?</li>
  <li>Also, I was wondering if there is a way that in the first variable I
  don't have to list all numbers separately but instead just write the
  first (1) and last (5) number of a series as they are just simple
  sequences like 1, 2, 3, 4, 5.</li>
  </ol>
  
  <p>Can someone tell me what I am doing wrong here ?</p>
  
  <p><strong>My JS:</strong> </p>
  
  <pre><code>$('#btnStart').on('click', function(){
      var cols = [1, 2, 3, 4, 5];
      var tbody = '';
      var i;
      for (i = 0; i &lt; cols.length; i++) {
          tbody += cols[i] + "&lt;tr&gt; \
                  &lt;td class='td col1'&gt;1&lt;/td&gt; \
                  &lt;td class='td col2'&gt;2&lt;/td&gt; \
                  &lt;td class='td col3'&gt;&lt;div contenteditable='true' class='editable'&gt;&lt;/div&gt;&lt;/td&gt; \
              &lt;/tr&gt;";
      }
      $('#bodyCal').html(tbody);
  });
  </code></pre>
  
  <p><strong>My HTML:</strong> </p>
  
  <pre><code>&lt;table class="tblCal"&gt;
      &lt;colgroup&gt;
          &lt;col class="col1" /&gt;
          &lt;col class="col2" /&gt;
          &lt;col class="col3" /&gt;
      &lt;/colgroup&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th colspan="3" class="th th2"&gt;Col 1&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;div id="bodyCal"&gt;&lt;/div&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>