Click to See Complete Forum and Search --> : dropdown box in dynamic HTML Table


mal5810
07-15-2004, 04:36 PM
I have a button that adds rows in a table. The table has a column that has a dropdown list. When a row is added, I need a new instance of the same dropdown list for that column.
I have been able to dynamically add and remove rows and I have successfully added a dropdown list in the first new row. However, I can only do this once before I get the javascript error: Object doesn't support this property or method.

If there is a better way to reuse an identical dropdown with a different id, I'd love to hear it.

sample code (I'll try to keep it short, with comments):
.
.
var shipperList;

//On form load, initialize the list of options from the static dropdown to
//rebuild dropdown when a new table row is added.
function initForm(){
var selObj = document.getElementById("dropdown1");
var size = selObj.length;
shipperList = new Array();
for (var i=0; i<size; i++){
shipperList[i] = new Option(selObj.options[i].text, selObj.options[i].value);
}
}

//Function to add new <tr>. Table id = objName.
function insertRow(objName){
var obj = document.getElementById(objName).getElementsByTagName("TBODY")[0];

var rows;
var elName;
var innertxt = "";

var td5 = document.createElement("TD");
rows = document.getElementsByName("profileRow");
elName = "cmbShipper" + (rows.length+1);
innertxt = "<select name='" + elName + "' id='" + elName + "' onblur=\x22populateProfileArray(" + elName + ")\x22/>";

td5.innerHTML = innertxt;

row = obj.insertRow(rows.length+1);
row.id = "profileRow";
row.appendChild(td5);

var s = document.getElementById(elName);
for (var i=0; i<shipperList.length; i++){
//This works the first time I add a row. Any other time s.options is
// null and I get JS Error: Object doesn't support this property or
// method.
//The first new row works fine, for any additional row s.options is null
s.options[i] = shipperList[i];
}

Thanks in advance for any help!!