Как определить, происходят ли какие-либо изменения в тексте в одной из <td>каждой строки таблицы?

Question

У меня есть стол. У него есть МНОЖЕСТВЕННЫЕ СТРОКИ.

каждая строка имеет восьмую <td>.

каждая <tr> и <td> в моей таблице "NOT" не имеет ни ID, ни CLASS .. отсюда:

<table id="dummytable">
<thead>
  <tr>
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
      <th>head 5</th>
      <th>head 6</th>
      <th>head 7</th>
      <th>head 8</th>
  </tr>
</thead>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
  ...and so on and so forth....
</table>

Я хочу получить изменения в тексте в одном из тд каждой строки, как вы можете видеть в примере.

мой начальный код такой

$('td:nth-child(3)').each(function() {

       $(this).closest("tr").find('td:eq(5)').change(function(){
            console.log('HELLO');
       });

});

но ничего не происходит. в консоли ничего не регистрируется

Answer 1

Прямое решение с jquery. Вам нужно будет прослушать событие DOMSubtreeModified. Это должно фиксировать любые изменения 6-го элемента td в каждой строке.

$( "tr td:nth-child(6)" ).on("DOMSubtreeModified", function(){
  console.log("changed");
});
let i = 0;
setInterval(function(){ 
    $("tr td:nth-child(6)").text(i);
    i = i+1;
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="dummytable">
<thead>
  <tr>
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
      <th>head 5</th>
      <th>head 6</th>
      <th>head 7</th>
      <th>head 8</th>
  </tr>
</thead>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
 <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
 </tr>
  ...and so on and so forth....
</table>

Answer 2

Метод изменения jQuery прослушивает событие изменения, вам нужно MutationObserver, пример показан ниже.

(() =>
{
  const observer = new MutationObserver(
    mutationsList =>
    {
      console.log('Something changed!');
    }
  );
  
  document.querySelectorAll('table tr td:nth-child(6)')
    .forEach(node => observer.observe(node, { attributes: true, childList: true, subtree: true }));
    
  document.querySelector('button')
    .addEventListener('click', () =>
    {
      const nodes = document.querySelectorAll('table tr td:nth-child(6)');
      const node = nodes[Math.floor(Math.random() * nodes.length)];
      node.textContent = 'I changed!';
    }, true);
})();

<button>Click me to change</button>

<table id="dummytable">
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
      <th>head 5</th>
      <th>head 6</th>
      <th>head 7</th>
      <th>head 8</th>
    </tr>
  </thead>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
    <td>five</td>
    <td>I WANT TO GET THE CHANGES HAPPENING IN THIS TEXT</td>
    <td>seven</td>
    <td>eight</td>
  </tr>
</table>