javascript - 如何检测表格每一行的<td>之一的文本是否发生变化？

Question

我有一张 table 。它有多行。

每行有八个 <td> .

每个<tr>和<td>在我的表中“没有”有 ID 也没有类别 .. 因此:

<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 中文本的更改，如示例中所示。

我的起始代码是这样的

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