title: jQuery dynamically append table rows without flickering
body: <p>I have a page that every 5 seconds fetch new data from the server with jQuery ajax and append it to a table. 
  <br>
  Everything is working fine except from one annoying issue.every append action causing the table to flickers.
  <br>
  I am looking for a way to smooth things a bit, and make this action more "eye friendly" for the user.
  <br>
  HTML:</p>
  
  <pre><code>  &lt;table id="myTable"&gt;
       &lt;thead&gt;
        &lt;tr&gt;
         &lt;th&gt;COL A&lt;/th&gt;
         &lt;th&gt;COL B&lt;/th&gt;
         &lt;th&gt;COL C&lt;/th&gt;                                    
        &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
  
       &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p><br>
  jQuery:
  <br></p>
  
  <pre><code>setInterval(function () {
      $('#myTable tbody').empty();
      $.ajax({
      type: "POST",
      url: "/MySite/WebMethods/AjaxTestMethods.aspx/GetActivityTable",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (data) {
      var d = data.d;
      for (var i = 0; i &lt; d.length; i++) {
      $('#myTable tbody').append('&lt;tr&gt;&lt;td&gt;' + d[i].DATA1 + '&lt;/td&gt;&lt;td&gt;' + d[i].DATA2 +'&lt;/td&gt;&lt;td&gt;' + d[i].DATA3 + '&lt;/td&gt;&lt;tr&gt;'); 
       }
      }
    });
   }, 5000);
  </code></pre>