Insert rows into table

Question

What is the best plain javascript way of inserting X rows into a table in IE.

The table html looks like this:

<table><tbody id='tb'><tr><td>1</td><td>2</td></tr></tbody></table>

What I need to do, is drop the old body, and insert a new one with 1000 rows. I have my 1000 rows as a javascript string variable.

The problem is that table in IE has no innerHTML function. I've seen lots of hacks to do it, but I want to see your best one.

Note: using jquery or any other framework does not count.

Answer 1

Here's a great article by the guy who implemented IE's innerHTML= on how he got IE to do tbody.innerHTML="<tr>...":

At first, I thought that IE was not capable of performing the redraw for modified tables with innerHTML, but then I remembered that I was responsible for this limitation!

Incidentally the trick he uses is basically how all the frameworks do it for table/tbody elements.

Edit: @mkoryak, your comment tells me you have zero imagination and don't deserve an answer. But I'll humor you anyway. Your points:

> he is not inserting what i need

Wha? He is inserting rows (that he has as an html string) into a table element.

> he also uses an extra hidden element

The point of that element was to illustrate that all IE needs is a "context". You could use an element created on the fly instead (document.createElement('div')).

> and also the article is old

I'm never helping you again ;)

But seriously, if you want to see how others have implemented it, take a look at the jQuery source for jQuery.clean(), or Prototype's Element._insertionTranslations.

Answer 2

Do as jQuery does it, eg. add <table> and </table> around it, insert into document and move the nodes you want to where you want them and ditch the temp-element.

Answer 3

the code ended up being this:

    if($.support.scriptEval){
    //browser needs to support evaluating scripts as they are inserted into document
        var temp  = document.createElement('div');
    temp.innerHTML = "<table><tbody id='"+bodyId +"'>"+html;
    var tb = $body[0];
    tb.parentNode.replaceChild(temp.firstChild.firstChild, tb);
    temp = null;
    $body= $("#" + bodyId);
    } else {
    //this way manually evaluates each inserted script
        $body.html(html);
    }

Things that beed to exist beforehand: a table that has a body with id of 'bodyId'. $body is a global variable (or the function has a closure on it), and there is a bit of jquery in there too, because IE does not evalute scripts that are inserted into the html on the fly.

Answer 4

I had the same problem (as do lots of other people) and after a lot of playing around here's what I got to work.

You have to make a tr via document.createelement ('tr') then make a td, the same way. appendchild the td to the tr, appendchild the tr to tbody (not table) THEN you can innerhtml the td you created and it will work. This was ie8 I was using. Basically the table structure has to be made with createelement but the rest of it can be innerHTMLed. I was doing this watching in the IE8 debugger and it would say it would add it (if I did tr.innerhtml="blah") and give no error, but it wouldn't display, and the html dom view showed a very broken table (no td ever showed up, but the /td did)

So when finally I did the tr AND td by createelement calls, it created a correct looking dom and drew the page correctly.