如何检测表格每行之一的文本中是否有任何变化<td>？

Question

我有一张表。它有多排。

每一行具有第eig个CCD_ 1。

我的表中的每个<tr>和<td>都没有和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中获得文本中的更改，正如您在示例中看到的那样。

我的起始代码是这样的

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