Compare old HTML table with new one and animate the changes
<p>When the page initially loads, it loads this table from a PHP file that keeps the table updated:</p>

<pre><code>&lt;table id="mytable"&gt;
    &lt;tr id="1"&gt;&lt;td&gt;Item 1&lt;/td&gt;&lt;td&gt;bla bla bla&lt;/td&gt;&lt;td class="sort"&gt;1&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="2"&gt;&lt;td&gt;Item 2&lt;/td&gt;&lt;td&gt;bla bla bla&lt;/td&gt;&lt;td class="sort"&gt;2&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="3"&gt;&lt;td&gt;Item 3&lt;/td&gt;&lt;td&gt;bla bla bla&lt;/td&gt;&lt;td class="sort"&gt;3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="4"&gt;&lt;td&gt;Item 4&lt;/td&gt;&lt;td&gt;bla bla bla&lt;/td&gt;&lt;td class="sort"&gt;4&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="5"&gt;&lt;td&gt;Item 5&lt;/td&gt;&lt;td&gt;bla bla bla&lt;/td&gt;&lt;td class="sort"&gt;5&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Then every 10 seconds I load through ajax again the table (which might have been updated from mysql) to compare it with the first one and act accordingly, let's say the updated table looks like this:</p>

<pre><code>&lt;table id="mytable"&gt;
    &lt;tr id="1"&gt;&lt;td&gt;Item 1&lt;/td&gt;&lt;td&gt;bla bla bla&lt;/td&gt;&lt;td class="sort"&gt;1&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="32"&gt;&lt;td&gt;Item 32&lt;/td&gt;&lt;td&gt;bla bla bla&lt;/td&gt;&lt;td class="sort"&gt;2&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="5"&gt;&lt;td&gt;Item 5&lt;/td&gt;&lt;td&gt;bla bla bla&lt;/td&gt;&lt;td class="sort"&gt;3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="21"&gt;&lt;td&gt;Item 21&lt;/td&gt;&lt;td&gt;bla bla bla&lt;/td&gt;&lt;td class="sort"&gt;4&lt;/td&gt;&lt;/tr&gt;
    &lt;tr id="7"&gt;&lt;td&gt;Item 7&lt;/td&gt;&lt;td&gt;bla bla bla&lt;/td&gt;&lt;td class="sort"&gt;5&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>The problem is that if I just load the table (replace it) its hard to keep the track of what is happening, so I want to make it animated.</p>

<p>I want to compare each time the "current" version of the table with the "updated" one, and if there are changes, act accordingly:</p>

<ul>
<li>Removed items: fadeOut and destroyed</li>
<li>New items: Append in its new position and fadeIn</li>
</ul>

<p>Having the two html tables, how would I compare them and make the changes?</p>
