<p>I have a table with one column and about ten rows.  The first column has rows with text as row headers, "header 1", "header 2".  The second column contains fields for the user to type data (<em>textboxes</em> and <em>checkboxes</em>).  </p>

<p>I want to have a button at the top labelled "<em>Add New...</em>", and have it create a third column, with the same fields as the first column.  If the user clicks it again, it will create another blank column with fields (as in the second column).</p>

<p>Does anyone know of an effective way to manipulate the DOM to achieve this?</p>

<p>I'm experimenting with <code>div</code>'s and <code>TABLES</code> but i'm on my third day of doing this, and it feels harder than it should be.</p>

Something along the lines of
```
```
function(table)
{
  for(var i=0;i<table.rows.length;i++)
  {
    newcell = table.rows[i].cells[0].cloneNode(true);
    table.rows[i].appendChild(newcell);
  }
}
```
```