HTML: How to "pause" refresh of page when drawing HTML table dynamically

Question

I am creating a large table dynamically using Javascript. I have realised the time taken to add a new row grows exponentially as the number of rows increase. I suspect the Page is getting refreshed in each loop per row (I am also adding input elements of type text on each cell)

Is there a way to stop the page "refreshing" until I am done with the whole table?

Any suggestion on how to do this or go around it?

Answer 1

Maybe build your table as a big string of HTML, and then set the .innerHTML of a container div to that string when you've finished?

Answer 2

You can create the table object without adding it to the document tree, add all the rows and then append the table object to the document tree.

var theTable = document.createElement("table");
// ... 
// add all the rows to theTable
// ...
document.body.appendChild(theTable);

Answer 3

Did you try the <tbody> tag when you create the table? It is possible browsers optimize that and don't "refresh" the table while populating it.

Answer 4

If your cells sizes are the same for each row then you will be able to specify style table-layout:fixed - this will give you the greatest performance gain as the browser won't have to recalculate cells sizes each time a row is added

Answer 5

I have tried all the suggestions above, but I am still getting the performance bottlenecks.

I tried to analyse line after line, and I have noted that document.getElementById() is one of the lines taking a lot of time to execute when the table is very large. I am using getElementById() to dynamically access an HTML input of type text loaded on each cell of the table.

Any ideas on which DOM method I should use instead of getElementById()?

Answer 6

Use the table DOM to loop trough the rows and cells to populate them, instead of using document.getElementByID() to get each individual cell.

E.g.
thisTable = document.getElementByID('mytable');//get the table
oneRow = thisTable.rows[0].cells; //for instance the first row
for (var colCount = 0; colCount <totalCols; colCount ++)
{
   oneCell =oneRow[colCount];
   oneCell.childNodes[0].value = 'test';//if your cell contains an input element
   oneCell.innerHTML = 'test'; // simply write on the cell directly
}

Hope that helps someone else... Cheers.