inserting new html table row using Javascript?

[Karim]

I have a form built into an html table. One of the form elements is an
asp.net dropdownlist. For some options in the listbox, I want to insert a
new table row under the listbox to grab some more info for that option. For
example if someone chooses 'other', a user needs to type what other is.
Because more than one option needs more info, I do not want to have a
textbox for each of these options so as not to crowd the page but instead,
dynamically insert a new textbox if one of these options are chosen.

I also prefer to do this through clientside Javascript instead of a
roundtrip post.
Anyone has an example of Javascript to do this effect?
Tnanks.

Karim

 

[Donald Simpson]

Karim,

Hopefully this will help.

Regards

Donald

//Get reference to table.
var Table = document.getElementById('ForecastEditor_tblForecasts');

//Get reference to table body.
var TableBody = Table.firstChild;

//Create the new elements
var NewRow = document.createElement("tr");
var ActionsCell = document.createElement("td");
var StartDateCell = document.createElement("td");
var StartDateTextbox = document.createElement("input");
var EndDateCell = document.createElement("td");
var EndDateTextbox = document.createElement("input");
var ValueCell = document.createElement("td");
var ValueTextbox = document.createElement("input");

//Add textboxes to cells
StartDateCell.appendChild(StartDateTextbox);
EndDateCell.appendChild(EndDateTextbox);
ValueCell.appendChild(ValueTextbox);

//Add elements to row.
NewRow.appendChild(ActionsCell);
NewRow.appendChild(StartDateCell);
NewRow.appendChild(EndDateCell);
NewRow.appendChild(ValueCell);

//Add row to table
TableBody.appendChild(NewRow);