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>
