ページが最初にロードされるとき、テーブルを最新の状態に保つPHPファイルからこのテーブルをロードします。
<table id="mytable">
<tr id="1"><td>Item 1</td><td>bla bla bla</td><td class="sort">1</td></tr>
<tr id="2"><td>Item 2</td><td>bla bla bla</td><td class="sort">2</td></tr>
<tr id="3"><td>Item 3</td><td>bla bla bla</td><td class="sort">3</td></tr>
<tr id="4"><td>Item 4</td><td>bla bla bla</td><td class="sort">4</td></tr>
<tr id="5"><td>Item 5</td><td>bla bla bla</td><td class="sort">5</td></tr>
</table>
次に、10秒ごとにajaxを介してテーブル(mysqlから更新された可能性があります)を再度ロードして、最初のテーブルと比較し、それに応じて動作します。たとえば、更新されたテーブルは次のようになります。
<table id="mytable">
<tr id="1"><td>Item 1</td><td>bla bla bla</td><td class="sort">1</td></tr>
<tr id="32"><td>Item 32</td><td>bla bla bla</td><td class="sort">2</td></tr>
<tr id="5"><td>Item 5</td><td>bla bla bla</td><td class="sort">3</td></tr>
<tr id="21"><td>Item 21</td><td>bla bla bla</td><td class="sort">4</td></tr>
<tr id="7"><td>Item 7</td><td>bla bla bla</td><td class="sort">5</td></tr>
</table>
問題は、テーブルをロードする(置き換える)だけでは、何が起こっているのかを追跡するのが難しいため、アニメーション化することです。
テーブルの「現在の」バージョンと「更新された」バージョンを毎回比較したいのですが、変更がある場合は、それに応じて行動します。
- 削除されたアイテム:fadeOutと破棄
- 新しいアイテム:新しい位置に追加してフェードインします
2つのhtmlテーブルがある場合、それらを比較して変更するにはどうすればよいですか?