how to detect whether there are any changes happening in the text in one of the <td> of each row of a table?

user_264950 0
Viewed 28

I have a table. It has MULTI ROWS.

each row has eigth <td>.

each <tr> and <td> in my table does "NOT" have and ID nor a CLASS .. hence:

<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>

I want to get the changes in the text in one of the td of each row, as you can see in the example.

my starting code is like this

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

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

});

but nothing is happening. it doesn't log anything in the console

jquery javascript
2 Answers

Straight up solution with jquery. You will have to listen to the DOMSubtreeModified event. This should capture any changes to the 6th td element in each row.

$( "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>

user_113327970

The jQuery change method listens to the change event, what you're wanting is MutationObserver an example is shown below.

(() =>
{
  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>

user_18955440
Related