Finding a fix for the dynamic table row problem, I started to use the insertRow() functionality which did solve the problem in FireFox. So I would call insertRow() on the table then returned in the table row object that I then used innerHTML to add all the relevant code to produce the inputs and labels. This was tested and worked great in FF, this type of solution was wanted instead of adding each cell because there were Ajax calls used to generate some of the drop down inputs.
When it came to testing with IE6 and IE7 here came the problem there was a strange error when ever the rows were being added. So I did some digging and I finally found the following.
Note In Internet Explorer, the innerText and innerHTML properties are read-only on the tr object.
So if your going to be adding dynamic rows to tables with inputs I’ve ruled out using innerHTML on both the table element and the tr. Check back soon and I’ll see if I can find a workaround or if I end up using a different method to generate my rows.
View a workaround here
This will add a new row no problem.
But if we add some inputs we start getting problems.
When we add one row then enter a value in the input then, the user hit a plus button to add another row the data that was entered is lost. So this is how not to do dynamic tables with inputs, more to follow on how to fix this problem.