Building an HTML table on the fly using jQuery
<p>Below is the code I use to build an HTML table on the fly (using JSON data received from the server).</p>

<p>I display an animated pleasewait (.gif) graphic while the data is loading. However, the graphic freezes while the JavaScript function is building the table. At first, I was just happy to make this happen (display the table), I guess now I need to work on efficiency. At the very least I need to stop the animated graphic from freezing. I can go to a static "Loading" display, but I would rather make this method work.</p>

<p>Suggestions for my pleasewait display? And efficiency? Possibly a better way to build the table? Or maybe not a table, but some other "table" like display</p>

<pre><code>var t = eval( "(" + request + ")" ) ;
var myTable = '' ;
myTable += '&lt;table id="myTable" cellspacing=0 cellpadding=2 border=1&gt;' ;
myTable +=  "&lt;thead&gt;" ;
myTable +=   "&lt;tr&gt;";
for (var i = 0; i &lt; t.hdrs.length; i++) {
    myTable +=    "&lt;th&gt;"     + header +       "&lt;/th&gt;";
}
myTable +=   "&lt;/tr&gt;" ;
myTable +=  "&lt;/thead&gt;" ;
myTable +=  "&lt;tbody&gt;" ;

for (var i = 0; i &lt; t.data.length; i++) {
    myTable +=    '&lt;tr&gt;';
    for (var j = 0; j &lt; t.hdrs.length; j++) {
        myTable += '&lt;td&gt;';
        if (t.data[i][t.hdrs[j]] == "") {
            myTable += "&amp;nbsp;" ;
        }
        else {
            myTable += t.data[i][t.hdrs[j]] ;
        }
        myTable += "&lt;/td&gt;";
    }
    myTable +=    "&lt;/tr&gt;";
}
myTable +=  "&lt;/tbody&gt;" ;
myTable += "&lt;/table&gt;" ;

$("#result").append(myTable) ;
$("#PleaseWaitGraphic").addClass("hide");
$(".rslt").removeClass("hide") ;
</code></pre>
