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 (textboxes and checkboxes).

I want to have a button at the top labelled "Add New...", 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).

Does anyone know of an effective way to manipulate the DOM to achieve this?

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

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 (textboxes and checkboxes).

I want to have a button at the top labelled "Add New...", 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).

Does anyone know of an effective way to manipulate the DOM to achieve this?

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

• javascript
• dom

• Hints to improve your post: remove Ajax from the title, it plays no role in your problem (as you expose it). And you write: "with one column" then "The second column"... – PhiLho Commented Oct 3, 2008 at 20:24
• @PhiLho: heh, i already edited ajax out of the tags and totally missed it in the title. Corrected. – Shog9 Commented Oct 3, 2008 at 22:43

2 Answers 2

Amusing exercise. Thanks to AviewAnew's hint, I could do it.

function AddColumn(tableId)
{
  var table = document.getElementById(tableId);
  if (table == undefined) return;
  var rowNb = table.rows.length;
  // Take care of header
  var bAddNames = (table.tHead.rows[0].cells.length % 2 == 1);
  var newcell = table.rows[0].cells[bAddNames ? 1 : 0].cloneNode(true);
  table.rows[0].appendChild(newcell);
  // Add the remainder of the column
  for(var i = 1; i < rowNb; i++)
  {
    newcell = table.rows[i].cells[0].cloneNode(bAddNames);
    table.rows[i].appendChild(newcell);
  }
}

with following HTML:

<input type="button" id="BSO" value="Add" onclick="javascript:AddColumn('TSO')"/>
<table border="1" id="TSO">
<thead>
<tr><th>Fields</th><th>Data</th></tr>
</thead>
<tbody>
<tr><td>Doh</td><td>10</td></tr>
<tr><td>Toh</td><td>20</td></tr>
<tr><td>Foo</td><td>30</td></tr>
<tr><td>Bar</td><td>42</td></tr>
<tr><td>Ga</td><td>50</td></tr>
<tr><td>Bu</td><td>666</td></tr>
<tr><td>Zo</td><td>70</td></tr>
<tr><td>Meu</td><td>80</td></tr>
</tbody>
</table>

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);
  }
}