insertRow returns null in IE7

Question

        var otbody = document.createElement('tbody');
        var otr = otbody.insertRow(ordernumber);
        otr.id="order" + ordernumber;
        var pidCell = otr.insertCell(0);

There is an error when insertRow is executed in IE7. I use IE9's IE7 mode, and otbody does have the method insertRow. I have tried 0, -1, 1 etc. as the argument of this method in debugger console, but all return null. And when I use document.createElement("tr") to create table row, insertCell() returns null. I wonder if these methods to deal with table work on all browser.

Answer 1

IE7 requires tbody attached to a table element to create tr, so you should create an extra table element, append the tbody element to table, than call insertRow on tbody element:

var otable = document.createElement('table');
var otbody = document.createElement('tbody');
otable.appendChild(otbody);
var otr = otbody.insertRow(0); // now otr will not be null
var otd = otr.insertCell(0); // and the same as tr element