Please note, new blog at

Using setInterval() to populate tables in Internet Explorer

I am sure most of you have seen how Internet Explorer renders tables, and how annoying it is to wait for them. It renders tables all at once. By that I mean that if you have a 1000 row table, it will not show anything on screen until it has appended the 1000 rows to the table. A work colleague showed me this technique. If you use the setInterval() method to create a timer that populates the table, it will force each row of table to be rendered to screen. Firefox doesn't suffer from this problem, and it incrementally renders tables. <script> var currentRow = 0; var threadID = null; function populateTable() { var oTable = document.getElementById("simpleTable"); threadID = window.setInterval( function() { drawRow(oTable); } , 5 ); } function drawRow(oTable) { // Create a new TR element oTR = oTable.insertRow(); oTD = oTR.insertCell(); oTD.innerHTML = currentRow; oTD = oTR.insertCell(); oTD.innerHTML = "Last name " + currentRow; oTD = oTR.insertCell(); oTD.innerHTML = "First name " + currentRow oTD = oTR.insertCell(); oTD.innerHTML = "City " + currentRow; currentRow++; if (currentRow == 200) { window.clearInterval(threadID); currentRow = 0; } } </script> .... <a href="javascript:populateTable()">Populate the table</a> <br/><br/> <table id="simpleTable"> <caption>Simple Table</caption> <thead> <tr> <td>ID</td> <td>Last Name</td> <td>First Name</td> <td>City</td> </tr> </thead> </table>

By Anonymous Anonymous, at 11/28/2005 06:28:00 am  

There's a table-layout CSS attribute, that will make IE render the table as it's received. IE will read the header/first row and decide table widths based on that, and then render as data is received. No need for fancy scripting.

By Blogger Darryl Lyons, at 11/28/2005 07:12:00 pm  

Ahh, thanks for the tip. In the context of our application, I'll still use the setInterval approach. I'm essentially reading from a recordset that is being continously updated from the server.

However, I will put the property on the table anyway and see if I get even better results.

By Blogger J&D, at 9/18/2009 10:20:00 pm  



By Blogger cherrywei, at 3/24/2011 05:40:00 pm  

r4i gold
acekard 2i
ps3 move
ps3 controller
ps3 games
ps3 wireless controller
ps3 move accessories
cheap ps3 controller
ps3 hdd
ps3 games hdd
Acekard 2i
nds card
r4 dsi
r4 revolution
r4i gold
M3i Zero
Acekard 2i
Acekard 2i
supercard ds2
ps3 external hard drive
ps3 accessories

» Post a Comment


» Create a Link