Building an HTML table on the fly using jQuery

Question

Below is the code I use to build an HTML table on the fly (using JSON data received from the server).

I display an animated pleasewait (.gif) graphic while the data

Answer 1

For starters, check out flydom and it's variants, they will help termendously. Could you possibly give more context? If this is not in the onload and just pasted in the page, just wrapping the whole thing in $(function () { /* code */ }) will probably clean up everything you are having problems with. Inline JS is executed immediately, which means that loop for the table. onload is an event and essentially 'detached'.

Answer 2

My experience has been that there are two discrete delays. One is concatenating all those strings together. The other is when the browser actually tries to render the string. Typically, it's IE that has the most trouble with UI freezes, in part because it's a lot slower at running javascript. This should get better in IE8.

What I would suggest in your case is breaking the operation into steps. Say for a 100 row table, you produce a valid 10 row table first. Then you output that to screen and use a setTimeout to return control to the browser so the UI stops blocking. When the setTimeout comes back, you do the next 10 rows, etc.

Creating the table using DOM is certainly "cleaner", as others have said. However, there is a steep price to pay in terms of performance. See the excellent quirksmode article on this subject, which has some benchmarks you can run yourself.

Long story short, innerHTML is much, much faster than DOM, even on modern JS engines.