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.

This came from MSDN, available here. So great now I’m faced with finding a workaround or redeveloping all the Ajax based menus. I could switch to JSON or returning JavaScript and running eval on it, but that would mean either redoing all the static parts of the system or having two separate pieces of code to do the same thing which is never good.

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.

Update
View a workaround here

I’ve been building a web based application that uses Ajax and other JavaScript extensively. While working with adding rows to tables dynamically I’ve found the wrong way to do it and thought I should share. When adding rows to tables if the rows are simply data this method will work fine, but when the rows contain form inputs there is a problem.

This will add a new row no problem.

var elm = document.getElementById(“tableone”);
var old = elm.innerHTML;
elm.innerHTML = old + “<tr><td>Sample</td></tr>”;

But if we add some inputs we start getting problems.

var elm = document.getElementById(“tableone”);
var old = elm.innerHTML;
count++;
elm.innerHTML = old + “<tr><td><input type=‘text’ name=‘test”+count+“’ id=‘text”+count+“’ /></td></tr>”;

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.