jquery - jQuery：2つのテーブルを「差分」します。共通していない行を表示する

Question

チェックアウトアプリケーションの場合：

最近追加されたアイテムのみを表示する必要があります。

制約：

フォームでのアクションの送信を制御することはできません。
「行追加」メカニズムを制御できません

私の考え：

1. ドキュメントの読み込み時にテーブルのクローンを作成する
2. 「finish」でのクローンとテーブルを比較または「差分」します
3. 一意の行を表示する

私が今いるところ：

http://jsfiddle.net/XLsCx/10/

新しいテーブルに表示する一意の行を取得できません。赤で強調表示されているものを見ると、結果も間違っています。

（コオロギの鳴き声）

まだわかりませんね。さて、やった…ついに。

http://jsfiddle.net/FkrBc/

後で回答として提出します。

Answer 1

それらを読んで、女性を泣かせてください！

http://jsfiddle.net/FkrBc/

Answer 2

すべてのテーブルのクローンを作成する必要はありません。最後のテーブルを保存し、ボタンのクリックで保存された後に表示されるtrすべてのスタイルを変更するだけです。tr

これを試して：

var $lastRow;
function updateLastRow() {
    $lastRow = $('#firstTable tr:last')
}

updateLastRow();

$("#houston button").click ( function () {
    var row = "<tr><td>new</td><td>item</td><td>added</td></tr>";
    $(row).insertAfter('#firstTable tbody>tr:last');
});

$("#newItems button").click ( function () {
    $lastRow.nextAll().find('td:eq(1)').css('background-color', 'red');
    updateLastRow();
});

デモ