Clever Geek Handbook

How to "pause" page refresh while dynamically drawing an HTML table

I am creating a large table dynamically using Javascript. I realized that the time taken to add a new line grows exponentially as the number of lines increases.

I suspect the page is being refreshed in every loop per row (I also add type text input items to each cell)

Is there a way to stop the page refreshing until I have finished the whole table?

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

I've tried all suggestions above, but I'm still experiencing performance bottlenecks.

I tried to parse line by line and I noticed that document.getElementById () is one of the lines taking a long time to execute when the table is very large. I am using getElementById () to dynamically access the HTML input of the type of text loaded in each cell of the table.

Any ideas on which to use the DOM method instead of getElementById ()?

+1


source to share


5 answers


Use a DOM table to cycle through cells and cells, 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 someone helps ... Cheers.

0


source


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



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


source


Maybe create the table as a big HTML string and then when you're done, set the .innerHTML of the container div to that line?

+1


source


Have you tried using the <tbody> tag when creating your table? Perhaps browsers optimize this and don't "update" the table when it fills up.

0


source


If your cell sizes are the same for each line, you can specify the style table-layout:fixed

- this will give you the biggest performance boost since the browser doesn't have to recalculate the cell sizes every time a line is added

0


source






More articles:


All Articles