this.displayData = function () {    var i;    var $thead = $(thead);    var $tbody = $(tbody);    var numberOfFields = columnDataFields.length;    var numberOfRows = data.length;    // Variables to keep track of even and odd rows.    var evenRowClass = 'EvenBar';    var oddRowClass = 'OddBar';    var t = false;    $tbody.html('');    // Find the widths of the column headers and apply the same widths here.    // However, only do this if the colWidths are thus far undefined.    if (!colWidths) {        colWidths = [];        var headers = $thead.find('td');        var colWdith;        for (i = 0; i < headers.length; i++) {            colwidth = $(headers[i]).outerWidth();            colWidths.push(colwidth);            $(headers[i]).css('width', colwidth); // This statement is necessary for cross-browser compatibility. (The problem is with discrepencies in computed CSS.)        }    }    for (x in data) {        var entry = data[x];        var row = ['<tr class='];        row.push(t ? evenRowClass : oddRowClass);        row.push('>');        for (i = 0; i < numberOfFields; i++) {            row.push('<td style=width:');            row.push(colWidths[i]);            row.push(';>');            row.push(entry[columnDataFields[i]]);            row.push('</td>');        }        row.push('</tr>');        $tbody.append(row.join(''));        t = !t;    }    // If a callback function was set, invoke it.                if (typeof displayCallback === 'function')        displayCallback();} // end displayData
Can I adjust this code which displays a table to run faster?
javascript;optimization;dom
You don't need to redraw the entire table. Try just doing DOM manipulation to reorder the TRs.  I see that you also want to stripe the rows, but you can still do it with DOM manipulation. You should be able to take it from there.I created a simple example with almost 1000 rows and it runs almost instantaneously. There's some jQuery just so I don't have to worry about cross-browser issues. If you don't use jQuery, most libraries have the functionality I used,or you can just implement $.text on your own http://jsfiddle.net/unffs/2var table = document.getElementById('tbl');// Can't call sort on an HTML collection, so copy the contents to an arrayvar rows = Array.prototype.slice.call(table.rows);rows.sort(function(a, b) {    var aVal = $(a).text(), bVal = $(b).text();     return aVal > bVal ? 1 : (bVal > aVal ? -1 : 0);});var tbody = document.getElementById('tbody');for (var i=0; i < rows.length; i++) {    tbody.appendChild(rows[i]);}        That code works for a table like the following<table id='tbl'>  <tbody id='tbody'>    <tr><td>D</td></tr>    <tr><td>A</td></tr>    <tr><td>C</td></tr>    <tr><td>E</td></tr>    <tr><td>F</td></tr>    <tr><td>B</td></tr>    <tr><td>D</td></tr> </tbody></table>Using data to sort instead of HTMLIf you have some underlying data for the table, it will be even faster since you won't need to read the DOM (except for an id attribute)var data  = [   {id: 1, value: 'C'},   {id: 2, value: 'B'},   {id: 3, value: 'D'},   {id: 4, value: 'A'}];And your HTML looks like<table id='tbl'>  <tbody id='tbody'>    <tr id='row-1'><td>C</td></tr>    <tr id='row-2'><td>B</td></tr>    <tr id='row-3'><td>D</td></tr>    <tr id='row-4'><td>A</td></tr> </tbody></table>Here's the code to sort the tablevar table = document.getElementById('tbl');// Can't call sort on an HTML collection, so copy the contents to an arraydata.sort(function(a, b) {    return a.value > b.value ? 1 : (b.value > a.value ? -1 : 0);});var tbody = document.getElementById('tbody');for (var i=0; i < data.length; i++) {    tbody.appendChild(document.getElementById('row-' + data[i].id));}     