Hello, all. I’m developing something for IE and something is awry with my loop. I have a table which contains a 4 column header, one of those columns containing an “add row” button which calls addRow();. This adds another row right under it with a blank column(blank space under the add row button) and three inputs. The function is generic to work with any amount of columns, since I will be using it on multiple tables. Take a look:
function addRow(obj) //obj refers to the button "Add Row"
{
var colnum = obj.parentNode.parentNode.parentNode.children[1].children.length; //input.td.tr.tbody.the first coulumns length
alert(colnum); // A quick check to see if the value is correct, this works
var temptr = document.createElement('tr'); //the new tr is created
var tempAddrowtd = document.createElement('td'); //the blank space is created
temptr.appendChild(tempAddrowtd); //the blank space is appended as the first column of the tr
for(i=0;i<colnum;i++); //the loop is set to execute once for each column that exists
{
alert("loop running."+i); //again, another check to ensure the function is called
var temptd = document.createElement("<td>"); //td is created
var tempinput = document.createElement("<input>"); //input is created
tempinput.type="text"; //input type is set
temptd.appendChild(tempinput); //input is appended to td
temptr.appendChild(temptd); //td is appended to tr
}
obj.parentNode.parentNode.parentNode.appendChild(temptr); //final tr, which should be full after loop, is appended to the body.
}
Now I don’t see anything really wrong with this code, but for some reason, only one column results from the loop. Even though the declaration in the for loop clearly states i=0, and the colnum check clearly states that colnum is 4. The loop is run once. I tried alerting i’s value inside the loop and the very first (and last) value is always 4. What gives?!
Thanks for your help.
