title: Update (ajax) only part of table without affecting whole table
body: <pre><code>&lt;table width="100%" border="0" cellspacing="0" cellpadding="0" class="list"&gt;
                &lt;tr&gt;
                  &lt;th&gt;&lt;a href="#" class="sortby"&gt;Full Name&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a href="#" class="sortby"&gt;City&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a href="#" class="sortby"&gt;Country&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a href="#" class="sortby"&gt;Status&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a href="#" class="sortby"&gt;Education&lt;/a&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;a href="#" class="sortby"&gt;Tasks&lt;/a&gt;&lt;/th&gt;
                &lt;/tr&gt;
      &lt;div class="dynamicData"&gt;
                &lt;tr&gt;
                  &lt;td&gt;Firstname Lastname&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;Los Angeles&lt;/td&gt;
                  &lt;td&gt;USA&lt;/td&gt;
                  &lt;td&gt;Married&lt;/td&gt;
                  &lt;td&gt;High School&lt;/td&gt;
                  &lt;td&gt;4&lt;/td&gt;
                &lt;/tr&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Firstname Lastname&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;Los Angeles&lt;/td&gt;
                  &lt;td&gt;USA&lt;/td&gt;
                  &lt;td&gt;Married&lt;/td&gt;
                  &lt;td&gt;High School&lt;/td&gt;
                  &lt;td&gt;4&lt;/td&gt;
             &lt;/tr&gt;
      &lt;/div&gt; 
  &lt;/table&gt;
  </code></pre>
  
  <p>The idea is to update table rows when clicking on link with clasl <code>"sortby"</code> which is part of <code>th</code> <code>table</code> tag.</p>
  
  <p>I tried inserting div but this doesn't work. Separating this in two tables is not good solution because width in both tables cell are not following each other. Any other solution?</p>