Check if a table's rows are being changed
<p>I would like to use a MutationObserver (or anything else at this point) to listen for changes in my table. My <code>table -&gt; tbody -&gt; tr</code> elements can be changed in various ways, such as:</p>

<ol>
<li>Filtering through search (which toggles an <code>&lt;tr&gt;</code>-element to show or hide)</li>
<li>Filtering through checkboxes (again toggles them)</li>
<li>Removes <code>&lt;tr&gt;</code>-elements</li>
</ol>

<p>By using a MutationObserver, I can go and check for changes in the table. It works when I remove an element (because the childList and subtree changes), but it does not trigger, when an element's attribute changes. Here's my observer:</p>

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

<p>My HTML:</p>

<pre><code>&lt;table id="reports"&gt;
    &lt;thead&gt;........
    &lt;tbody&gt;
        &lt;tr&gt;&lt;td&gt;Stuff here 1&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Stuff here 2&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Stuff here 3&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>My <code>updateTable()</code> function is pretty simple: It updates the <code>table -&gt; tbody -&gt; tr</code>-element backgrounds. This means, that if I check for attribute change in the observer, it will run into an endless loop, because:</p>

<blockquote>
  <p>Oh someone hid the <code>&lt;tr&gt;</code> element! Let me go change the background. Oh look, someone changed the background! Let me change the background. Oh look! .... Endless loop</p>
</blockquote>

<p>How would I go on about this? Thanks</p>