SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    Froot r gewd SubKamran's Avatar
    Join Date
    May 2002
    Location
    North Star State
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    Code:
    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.
    "Sometimes little is more."
    Kamran A
    Web Dev/Designer
    Keyboard not found: Please Press F1 to Continue

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could add a skeleton table to the html first, and then append rows to the skeleton as you read them from your input.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if it's any faster, but this is the basic idea.
    Code:
    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
    }

  4. #4
    Froot r gewd SubKamran's Avatar
    Join Date
    May 2002
    Location
    North Star State
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    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.
    "Sometimes little is more."
    Kamran A
    Web Dev/Designer
    Keyboard not found: Please Press F1 to Continue

  5. #5
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •