Why is this addRow javascript editor not working in IE?

Question

I have the following javascript that adds a new row to the bottom of the table.

It works fine in Firefox, but it doesn't work in IE (version 8).

As far as I can tell, there are no visible errors.

Any ideas are very helpful!

function addRow() { // locate the last row in the table var table = document.getElementById("approversTable"); var rows = document.getElementsByTagName("tr"); var rowToClone; for (var i=0; i<rows.length; i++) { if (rows[i].id != "") { rowToClone = rows[i]; } } // clone the row var clone = rowToClone.cloneNode(true); var rowId = Math.floor(Math.random()*100000); clone.id = rowId; // add the new row to the table table.appendChild(clone); } 

Answer 1

You must directly select the tbody table element instead of the table.

  function addRow() { var table = document.getElementById("approversTable"); var tbody = table.tbodies[0]; var rows = document.getElementsByTagName("tr"); var rowToClone; for (var i=0; i<rows.length; i++) { if (rows[i].id != "") { rowToClone = rows[i]; } } // clone the row var clone = rowToClone.cloneNode(true); var rowId = Math.floor(Math.random()*100000); clone.id = rowId; // add the new row to the table tbody.appendChild(clone); } 

Additional information: http://www.w3schools.com/jsref/coll_table_tbodies.asp