Dynamically building a big table (200+ rows, etc)

[SubKamran]

So, I am embarking on some AJAX work, and I have a small dilemma that should be easily fixable.

When I get my data back, I need to add it to a table, or namely, make an HTML table.

Here's how I have it at the moment:

str += "<table style='border:1px solid white;' border='1' cellspacing='0' cellpadding='3'>";
                         
        for (var i = 0; i < ResultsTable.Rows.length; ++i) {
            var row = ResultsTable.Rows[i];
            str += InsertAd(i);
            str += BuildResultItem(row);    
            count++;                  
        }
        str += "</table>";

It's fast, or at least, pretty fast. There's a slight delay when it parses the results into the string. Is there a way to dynamically add each row RIGHT when it's parsed? So imagine you had an infinite number of rows, I am talking of a way to just add row after row ad infinitum, but not freeze/delay the browser in the process like it does at the moment.

[7stud]

You could add a skeleton table to the html first, and then append rows to the skeleton as you read them from your input.

[MikeFoster]

I don't know if it's any faster, but this is the basic idea.

function createTable(rows, cols)
{
  var r, c, t = document.createElement('table');
  for (r = 0; r < rows; ++r) {
    tr = t.insertRow(r);
    for (c = 0; c < cols; ++c) {
      td = tr.insertCell(c);
      // insert something into this td
    }
  }
  // insert 't' somewhere in the document
}

[SubKamran]

I don't know if it's any faster, but this is the basic idea.

See, I want 't' to already be added into the document... like 7stud's idea; though I don't know how to do that exactly.

[Quark]

insertRow and insertCell are relative slow functions. Maybe you can try insertAdjacentHTML. With this function you can add strings as html to the bottom.
Even better would be to just render the rows which are actually visible. You do not need to render all rows. Create a "fake" scrollbar of length of the no of rows. Set an onscroll event and calculate which rows are in view, and just render these rows.

[7stud]

See, I want 't' to already be added into the document...

You can use document.getElementById() or document.getElementByTagName("table") to get a table that is already in the html.

[Leoj00]

But a table that s already in the document won't have the right number of rows/tds. I don't think having the <table></table> already in there will speed anything up.