从浏览器中的实时表记录数据

Question

Let's say there's a real-time table on a website (For example a Forex website). There would be one table and the cell value changes dynamically. There wouldn't be any input, it's just like a live update of the cell value.

I can get to the cell value using this code. (Tweaking the row and column indices for the data I want)

document.getElementById('cr1').rows[1].cells.item(2).innerHTML

I want to log the data every time a cell value changes. So, my idea was to write some event listener which gets fired every time the cell value changes and append the new data to an array variable and then to save it whenever I want. So, how can I write a function to automatically store this? Like is there a listener available?

I want to do this using the Console provided by Google Chrome.

Answer 1

Try using DOMSubtreeModified event

let arr=[]
document.getElementById('cr1').rows[1].cells[0].addEventListener('DOMSubtreeModified',function(){
     arr.push(document.getElementById('cr1').rows[1].cells[2].innerHTML)
    });

 document.getElementById('tb').rows[1].cells[0].addEventListener('DOMSubtreeModified', function() { console.log("Im changed"); }); document.getElementById('changeData').addEventListener('click', function(e) { document.getElementById('tb').rows[1].cells[0].innerText = "Supercool"; }); document.getElementById('changeDataL').addEventListener('click', function(e) { document.getElementById('tb').rows[1].cells[1].innerText = "Antarctia1"; });

 <table id="tb"> <tr> <th> Name </th> <th> Location </th> </tr> <tr> <td> Superman </td> <td> Antarctica </td> </tr> <tr> <td> John </td> <td> Iceland </td> </tr> </table> <button id="changeData">Change superman</button><button id="changeDataL">Change antarctica</button>