title: jQuery add HTML table column
body: <p>I have a HTML table like this:</p>
  
  <pre><code>&lt;table border="1"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;a href="#" class="delete"&gt;DELETE ROW&lt;/a&gt;COL 1&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" class="delete"&gt;DELETE COL&lt;/a&gt;COL 2&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" class="delete"&gt;DELETE COL&lt;/a&gt;COL 3&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" class="delete"&gt;DELETE COL&lt;/a&gt;COL 4&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" class="delete"&gt;DELETE COL&lt;/a&gt;COL 5&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" class="delete"&gt;DELETE COL&lt;/a&gt;COL 6&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;ROW 1&lt;/td&gt;
              &lt;td&gt;ROW 1&lt;/td&gt;
              &lt;td&gt;ROW 1&lt;/td&gt;
              &lt;td&gt;ROW 1&lt;/td&gt;
              &lt;td&gt;ROW 1&lt;/td&gt;
              &lt;td&gt;ROW 1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;ROW 2&lt;/td&gt;
              &lt;td&gt;ROW 2&lt;/td&gt;
              &lt;td&gt;ROW 2&lt;/td&gt;
              &lt;td&gt;ROW 2&lt;/td&gt;
              &lt;td&gt;ROW 2&lt;/td&gt;
              &lt;td&gt;ROW 2&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What I need is a function to add a new column with a number of td's based on other columns. The thing is that in this HTML table, columns are removed with jQuery before new columns are added so the function needs to get the current column config and adapt accordingly because the rows and columns are always being removed or added.</p>
  
  <p>I have this code for adding a new column but it doesn't add the header:</p>
  
  <pre><code>function addACol() {
      var currentNumberOfTDsInARow = $('.tblModel tr:first td').length;
      newColNum = currentNumberOfTDsInARow;
      var rows = $('.tblModel tbody tr');
      for (var i = 0; i &lt; rows.length; i++) {
          var lastTDClone = $(rows[i]).find('td:last').clone();
          $(rows[i]).find('td:last').after(lastTDClone);
      }
  }
  </code></pre>