[noviceforever]

I've created a dynamic table where rows can be added upon clicking 'add new row' button. the cells have textboxes and select boxes as the elements(its an interactive form embedded in a dynamic table). Its working fine except tht when i add more than a certain number of rows, the drop down select boxes are getting all mixed up and garbled. The page entirely looses its layout and the form doesnt make any sense as the elements are displaces from their original places and the page kind of freezes. Can anyone tell me why this happens and how to prevent it? (I think this problem is occuring coz i have select boxes, had the cells contained only textboxes, it wud've worked fine)
TIA.

[TwoD]

Could you send the file or gie me the address to it and I'll take a look at it.

[noviceforever]

Thanks a lot. I have to let u know, that this prob is somethin im facing on Win98. On win XP...i created upto 50 rows with no problem.Is it an OS specific prob?

this is part of code where i face similar problem:

function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
 
//First Cell
var cellOne = row.insertCell(0);
var tag = document.createElement('td');
tag.setAttribute('valign','top');
var e1 = document.createElement('select');
e1.setAttribute('name', 'txtRow' + iteration + '1');
e1.setAttribute('size','1');
e1.setAttribute('style','background-color :#EFEECB');
cellOne.appendChild(e1);
 
// Second Cell
var cellTwo = row.insertCell(1);
var e2 = document.createElement('select');
 
e2.setAttribute('name', 'txtRow' + iteration + '1');
e2.setAttribute('size', '1');
cellTwo.appendChild(e2);
 
//Third Cell
var cellThree = row.insertCell(2);
var e3 = document.createElement('select');
e3.setAttribute('name','txtRow' + iteration + '2');
e3.setAttribute('size','1');
cellThree.appendChild(e3);
 
//Fourth Cell
var cellFour = row.insertCell(3);
var e4 = document.createElement('select');
e4.setAttribute('name','txtRow' + iteration + '3');
e4.setAttribute('size','1');
cellFour.appendChild(e4);
 
//Fifth Cell
var cellFive = row.insertCell(4);
var e5 = document.createElement('select');
e5.setAttribute('name','txtRow' + iteration + '4');
e5.setAttribute('size','1');
cellFive.appendChild(e5);
 
//Sixth Cell
var cellSix = row.insertCell(5);
var e6 = document.createElement('select');
e6.setAttribute('name','txtRow' + iteration + '5');
e6.setAttribute('size','1');
cellSix.appendChild(e6);
 
//Seventh Cell
var cellSeven = row.insertCell(6);
var e7 = document.createElement('select');
e7.setAttribute('name','txtRow' + iteration + '6');
e7.setAttribute('size','1');
cellSeven.appendChild(e7);
 
//Eighth Cell
var cellEight = row.insertCell(7);
var e8 = document.createElement('textarea');
e8.setAttribute('name','txtRow' + iteration + '7');
e8.setAttribute('rows','1');
cellEight.appendChild(e8);
 
} 

The basic HTML portion is :

HTML Code:

<input type="button" value="Add another row" onclick="addRowToTable();" />

<BR><BR>
<table border="1" id="tblSample" align="center">
<thead><tr>
<TD ALIGN='CENTER'><B>BLDG #</TD>
<TD ALIGN='CENTER'><B>FLR #</TD>
<TD ALIGN='CENTER'><B>FILE NAME</TD>
<TD ALIGN='CENTER'><B>REVISION DATE</TD>
<TD ALIGN='CENTER'><B>PROJECT #</TD>
<TD ALIGN='CENTER'><B>UPDATE ISSUED BY</TD>
<TD ALIGN='CENTER'><B>UPDATED BY</TD>
<TD ALIGN='CENTER'><B>DESCRIPTION</TD>
</thead></tr>

</table>

[TwoD]

I'm using Win XP too and there seems to be no problem.
I doubt that it's a OS related problem, mer likely it has to do with the browser.
I tested it in IE6 and there it works fine.

It could also be a problem with what is sourrounding the table, maybe there isn't enough space to squeeze in more cells without something else being moved first...