檢查表格的行是否正在更改

我想使用MutationObserver（或此處的其他任何內容）來偵聽表格中的更改。我table -> tbody -> tr元素可以通過各種方式，如改爲：檢查表格的行是否正在更改

過濾通過搜索（來回切換的<tr> - 元素顯示或隱藏）
過濾通過複選框（再次觸發它們）
刪除<tr> -elements

通過使用MutationObserver，我可以去檢查表中的更改。它在我移除一個元素（因爲childList和子樹改變）時起作用，但當元素的屬性改變時它不會觸發。這是我的觀察：

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

我的HTML：

<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()功能很簡單：它更新table -> tbody -> tr - 元素的背景。這意味着，如果我在觀察者檢查屬性的變化，它會碰上一個死循環，這是因爲：

哦，有人躲到<tr>元素！讓我去改變背景。哦，看，有人改變了背景！讓我改變背景。哦，看！ ....無盡循環

我該怎麼繼續呢？謝謝

來源

2016-06-01 MortenMoulder

我可能只是扔了'updateTable（）'到每一個事件我有（添加，刪除，選擇等），但就是這樣矯枉過正。 – MortenMoulder

根據這個https://developer.mozilla.org/en/docs/Web/API/MutationObserver中的突變觀察者，你可以爲突變觀察者設置一些配置..有一個顯然可以觀察到目標的屬性。你試過了嗎？ –

我加入{屬性：true} –

免責聲明：它可能不是一個高性能的解決方案。

但是在執行回調之前關閉觀察者呢？像

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();

當你改變#reports，這將觸發MutationObserver，你拔下它，所以你可以做你的DOM更改，然後你會再次放置觀察者。

代碼沒有經過測試，所以讓我知道這對你的作品

來源

2016-06-01 16:24:44

絕對像魅力一樣工作。我添加了'attributes'而不是'characterData'，因爲我還需要檢查屬性更改。非常感謝！ – MortenMoulder

太棒了！對不起，評論不夠清楚 –

不用擔心。它很棒！謝謝！ – MortenMoulder

檢查表格的行是否正在更改

回答

相關問題