Darryl Lyons' Blog
ColdFusion, AJAX and web...
Sunday, November 27, 2005Using 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 
, 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.
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/tablelayout.asp
By 
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 cherrywei, at
3/24/2011 05:40:00 pm
R4DS
r4i gold
r4i-sdhc
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
Acekard
r4 dsi
r4 revolution
r4i gold
M3
M3i Zero
Acekard
Acekard 2i
R4i
R4 SDHC
Acekard 2i
supercard ds2
ps3 external hard drive
ps3 accessories
CycloDS
» Post a Comment