テーブルの行が変更されているかどうかをチェック

Question

私はMutationObserver（またはこの時点で何か他のもの）を使用してテーブルの変更をリスンしたいと思っています。検索を通して濾過（表示または非表示に<tr> -elementをトグルする）

チェックボックスを通して濾過（再度トグル）

は<tr>を削除

1. ：私table -> tbody -> tr要素は、以下のような様々な方法で変更することができます-elements

MutationObserverを使用することで、テーブルの変更を確認できます。これは、要素を削除すると（子リストとサブツリーが変更されるため）機能しますが、要素の属性が変更されたときにはトリガーしません。

var observer = new MutationObserver(function(mutations, observer) { 
    updateTable(); 
}); 
observer.observe(document.querySelector('#reports'), { childList: true, characterData: true, subtree: true }); 

私のHTML：：ここに私の観察者のそれはtable -> tbody -> tr -element背景を更新します。

<table id="reports"> 
    <thead>........ 
    <tbody> 
     <tr><td>Stuff here 1</td></tr> 
     <tr><td>Stuff here 2</td></tr> 
     <tr><td>Stuff here 3</td></tr> 
    </tbody> 
</table> 

マイupdateTable()機能は非常に単純です。つまり、オブザーバーで属性の変更を確認すると、無限ループになります。

ああ、誰かが<tr>要素を隠してしまったことを意味します。背景を変えよう。ああ、誰かが背景を変えた！背景を変えさせてください。ああ見て！ ....無限ループ

どうすればよいですか？ありがとう

Answer 1

免責事項：これはパフォーマンス上の問題ではありません。

しかし、コールバックを実行する前にオブザーバを無効にするのはどうですか？あなたが#reportsを変更したときに

var observe = function(){ 
    var observer = new MutationObserver(function(mutations, observer) { 
     observer.disconnect(); // stop watching changes 
     updateTable(); // do your changes 
     observe(); // start watching for changes again 
    }); 
    observer.observe(document.querySelector('#reports'), { childList: true, attributes: true, subtree: true }); 
} 

だから、最初の時間のようなものは、あなただけの

observe(); 

だろう、それはあなたに、あなたはあなたのDOMの変更を行うことができますので、あなたは、それを外して、MutationObserver火災、となります再び観察者を置くだろう。

コードテストされていないので、これはあなた