Databases
StackOverflow2013
Postsdbo
POTable .append() occurring all at once
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTable .append() occurring all at once
    primarykey
    data
    text
    <p>I've got a <code>for</code> loop in which I am appending rows to a <code>table</code>. Although I append each <code>tr</code> one at a time in the loop, the browser does not render any of them until the loop is finished.</p> <p>At first, I thought it might be the browser rendering too quickly for me to notice, but after increasing the number of rows to, say, 10000, there's a significant slowdown, then the entire table shows at once.</p> <p><strong>Link:</strong> <a href="http://jsfiddle.net/xyan/ad2tV/" rel="nofollow">http://jsfiddle.net/xyan/ad2tV/</a></p> <p>Increment <code>counter</code> to increase the number of rows.</p> <p>Also, if you change <code>counter</code> to 3 (or another small number) and uncomment the <code>alert()</code>, it will pause the loop and show each row being added one at a time.</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div&gt;&lt;/div&gt; </code></pre> <p><strong>Javascript:</strong></p> <pre><code>var table = $('&lt;table /&gt;').appendTo($('div')); var counter = 1000; var html = []; var j = 0; for (var i = 1 ; i &lt; (counter + 1) ; i++) { html[j++] = '&lt;tr&gt;'; html[j++] = '&lt;td&gt;'+i+'-1&lt;/td&gt;&lt;td&gt;'+i+'-2&lt;/td&gt;&lt;td&gt;'+i+'-3&lt;/td&gt;'; html[j++] = '&lt;tr&gt;'; table.append(html.join('')); //alert('pause'); html = []; j = 0; } </code></pre> <p><strong>CSS:</strong></p> <pre><code> table td { padding: 3px; border: 1px solid red; } </code></pre> <hr> <p><strong>Note:</strong></p> <p>I've found a way to force the loop to slow down, allowing the rows to be added one at a time.</p> <p><strong>Link:</strong> <a href="http://jsfiddle.net/xyan/8SCP9/" rel="nofollow">http://jsfiddle.net/xyan/8SCP9/</a></p> <pre><code>var html = ''; var numbertorun = 15; var delay = 500; (function loop (i) { setTimeout(function () { html = '&lt;tr&gt;&lt;td&gt;'+i+'-1&lt;/td&gt;&lt;td&gt;'+i+'-2&lt;/td&gt;&lt;/tr&gt;'; $('table').append(html); if (--i) loop(i); }, delay) })(numbertorun); </code></pre> <hr> <p>So I guess my question isn't <em>how</em> to do this, but <em>why</em> the rows aren't inserted one at a time in the original <code>for</code> loop.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USXyan Ewing
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POTable .append() occurring all at once
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POTable .append() occurring all at once
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POTable .append() occurring all at once
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThese loops, or calculations are done in a split-second, so you will not be able to "see" the table being drawn. Power of the computer today, eh? EDIT: Also, you should draw the table as fast as you can, not drawing all the power from the computer (using up the ram). Instead, only using delay if you want this effect (just like your last example).
      singulars
      1. POTable .append() occurring all at once
      1. USOptimusCrime
    2. COI'm only guessing here, but I think the browser will not render anything while the JS-thread is busy.
      singulars
      1. POTable .append() occurring all at once
      1. USAlxandr
    3. COnot a very common question but a very annoying problem. thanks for indepth examples and description
      singulars
      1. POTable .append() occurring all at once
      1. USHomam
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload