title: Call a Javascript function when a table change content
body: <p>I have a Javascript code which format a number as a currency. All the content is on a table. At the moment, I have a class <code>money</code> in every <code>&lt;tr&gt;</code> and I call the function when the cell change. FYI, all the cells change at the same time in the table.</p>
  
  <pre><code>var spans = document.getElementsByClassName("money");
  for (var i = 0; i &lt; spans.length; i++) {
      var newText = spans[i].innerHTML.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      spans[i].innerHTML = newText;
  }
  </code></pre>
  
  <p>Is there any way instead of have the same class on every cell and catch an event on all of them, to do it on table and have the same result? For example,</p>
  
  <pre><code>$("#mytable").on('change', function() {
    // put my function here and apply to every cell
  });
  </code></pre>
  
  <p><strong>Update</strong>: I added the <code>DOMSubtreeModified</code> and tried to iterate through every cell in the table. However, even if I don't have any error on the console, it doesn't seem to work.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $("#resultstable").bind("DOMSubtreeModified", function() {
  
        $('#resultstable tr').each(function() {
          $('td').each(function (i, cell) {
            cell.innerHTML.replace(/\B(?=(\d{3})+(?!\d))/g, ",");    
        });
      });
      });  
  
  &lt;/script&gt;
  </code></pre>