title: Resize html table by adding removing rows and columns dynamically?
body: <p>I'd like to be able to add remove rows columns from a html table (aka. resize it)</p>
  
  <p>The table should be rectangular, it'll represent some 2D array value later.</p>
  
  <p>As the table will be refreshed many times and could get big in size, i don't think it'll be a good solution to empty it and fill it again.</p>
  
  <p>I thought of resizing the one I have now and clearing the previous edited cells before working on the new ones.</p>
  
  <p>My problem is in resizing, I could think of some solution by iterating through rows and adding removing cells, then add remove the rows, but I'm asking if there's some ready solution using js or jQuery to do this job or at least add remove columns?</p>
  
  <p>Sample Table (5x3)</p>
  
  <p><img src="https://i.stack.imgur.com/hY3GK.png" alt="Sample Table (5x3)"></p>
  
  <pre><code>&lt;table class="table-editor" id="table1"&gt;
      &lt;colgroup class=""&gt;&lt;/colgroup&gt;
      &lt;colgroup class=""&gt;&lt;/colgroup&gt;
      &lt;colgroup class=""&gt;&lt;/colgroup&gt;
      &lt;colgroup class=""&gt;&lt;/colgroup&gt;
      &lt;colgroup class=""&gt;&lt;/colgroup&gt;
      &lt;tbody&gt;
        &lt;tr class="highlighted-row"&gt;
          &lt;td&gt;•&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="normal-row"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;•&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="normal-row"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;•&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>