Question

我想使用MutationObserver（或此时的任何其他内容）来监听表中的更改。我的table -> tbody -> tr元素可以通过多种方式进行更改，例如：

通过搜索过滤（切换<tr> - 元素以显示或隐藏）
过滤复选框（再次切换它们）
删除<tr> - 元素

通过使用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>元素！让我去改变背景。哦，看，有人改变了背景！让我改变背景。哦，看！ ....无尽的循环

我将如何继续这个？感谢

Answer 1

免责声明：它可能不是一个高效的解决方案。

但是在执行回调之前停用观察者呢？像

这样的东西

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，然后再次放置观察者。

代码未经过测试，请告知我这是否适合您

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

1 个答案: