jQuery dynamically append table rows without flickering
<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>
