Search code examples
javascripthtml-tableinnerhtml

Insert rows into table


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.


Solution

  • 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.