Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 222
  • Last Modified:

Building table dynamically (by for loop)

Hi All, I am using AJAX, and getting a dataset (contain several hundreds of records), and I am writing the table in this way -->

since it contains hundreds of records, i would like to show the items whenever i&20 == 0, but my code doesn't work,
it simply displays all records at the end rather than showing them at "20" interval.
but if i add "alert" there, i can see "part of the table" is built already.

html :
<div id="divTable"></div>

js function:
//e.g. total records = 500
var s = new Array();
s[s.length] = "<table>";
for (i=0; i < 500; i++)
{
     s[s.length] = "<tr><td>this is record-"+i+"</td></tr>";
    //etc...
    if (i%20==0)
    {
            document.getElementById("divTable").innerHTML = s.join("");
            alert(i);
     }
}
s[s.length] = "</table>";
document.getElementById("divTable").innerHTML = s.join("");


0
orbulat
Asked:
orbulat
  • 3
2 Solutions
 
KennyTMCommented:
Because when the JS is running, the browser has no time to render the table.
When you alert(), however, the JS is halted temporarily and the table can be shown.
0
 
KennyTMCommented:
You can use a function and setTimeout() it for the intermediate break, e.g.

var s = new Array("<table>");
var total_records = 500;
var record_jump = 20;
var render_delay = 100;

function append_table ( n ) {
   for (var i = n; i < n + record_jump; ++ i)
      s.push ("<tr><td>this is record-"+i+"</td></tr>");
   document.getElementById("divTable").innerHTML = s.join("");

   if (n < total_records)
     setTimeout ("append_table(" + (n + record_jump) + ");", render_delay);
}

append_table(0);
s.push ("</table>");
document.getElementById("divTable").innerHTML = s.join("");
0
 
KennyTMCommented:
Use this instead. The above doesn't work perfectly.

var s = new Array("<table>");
var total_records = 500;
var record_jump = 20;
var render_delay = 100;

function append_table ( n ) {
      if (n < total_records) {
            for (var i = n; i < n + record_jump; ++ i)
                  s.push ("<tr><td>this is record-"+i+"</td></tr>");
            document.getElementById("divTable").innerHTML = s.join("");
            setTimeout("append_table(" + (n + record_jump) + ")", render_delay);
      } else {
            s.push("</table>");
            document.getElementById("divTable").innerHTML = s.join("");
      }
}

append_table(0);
0
 
Pravin AsarPrincipal Systems EngineerCommented:

function CreateTable () {
     var tblObj    = document.createElement("table");
     var tboObj    = document.createElement("tbody");
     tblObj.appendChild (tboObj);
     document.body.appendChild (tblObj);
     for (tx=0; tx < 10; tx++) {
       col1 = "Row " + (tx+1) + ' Col 1';
       col2 = "Row " + (tx+1) + ' Col 2';
      AddRowToTable(tboObj, col1, col2);
    }
}
function AddRowToTable(tBody, col1, col2){
     var tRow    = document.createElement("tr");
     var tCell1  = document.createElement("td");
     var tCell2  = document.createElement("td");

     tCell1.appendChild(document.createTextNode(col1));
     tCell2.appendChild(document.createTextNode(col2));
     tRow.appendChild(tCell1);
     tRow.appendChild(tCell2);
     tBody.appendChild(tRow);
}
0
 
orbulatAuthor Commented:
thanks a lot!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now