Hi there

I am trying to modify some code and not having much luck. The code will quite happily add another row onto a table when a drop-down has its values changed. The problem is that the code stops working when there is more than one table on the page! Can anyone suggest anything??? <img src=../images/dmxzone/forum/icon_smile_dissapprove.gif border=0 align=middle> I'm going around in circles here

The code I am using is below....



function addrow()
{
// get table body to add row to:
tableBody = document.getElementsByTagName("tbody"[0];
// get all rows in table;
rows = tableBody.getElementsByTagName("TR";
if (event.srcElement.id != "stepno" + (rows.length - 1))
{
}
else
{
lastRow = rows[rows.length - 1]; // we get the dropdown from this row.
// create row to add:
newRow = document.createElement("TR";

// copy first list box for use in the new row
stepNoCell = document.createElement("TD";
lastRowStepNoList = lastRow.getElementsByTagName("td"[0].getElementsByTagName("select"[0];
stepNoList = lastRowStepNoList.cloneNode(true);
stepNoList.id = "stepno" + rows.length;

stepNoCell.appendChild(stepNoList);
newRow.appendChild(stepNoCell);
// create cell for step title:
stepTitleCell = document.createElement("TD";
stepTitleTextBox = document.createTextNode("" + rows.length);
//stepTitleTextBox.type = "text";
//stepTitleTextBox.id= "stepTitle" + rows.length;
stepTitleCell.appendChild(stepTitleTextBox);
newRow.appendChild(stepTitleCell);
// add new row to bottom of table:
tableBody.appendChild(newRow);
}
}


&lt;/SCRIPT&gt;








*************************
and now the table code
**************************

select id="stepno1" name="dropdown" onChange="addrow()"