テーブルセルの値に変更があるといつでも識別します

Question

私は次のようなテーブルを持っています。 fpTotalとfrTotalのIDを持つセルの値に変更があったときに、それを識別する方法。私はJQueryの変更イベントを試してみましたが、うまく動かなかったのです。適切なJS関数はどれですか？

<table class="table table-bordered table-hover table-sm" id="t01"> 
     <thead style="text-align:center"> 
     <tr> 
      <th>Description</th> 
      <th>Rate/Unit</th> 
      <th>Total No</th> 
      <th>Price</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <th>Rate</th> 
      <td id="fpRate" style="text-align:right">0</td> 
      <td id="fpNos" style="text-align:center">0</td> 
      <td> 
       <div style="float:left">$</div> 
       <div style="float:right" id="fpTotal">-</div> 
      </td> 
     </tr> 
     <tr> 
      <th >Fractional page rate</th> 
      <td id="frRate" style="text-align:right">0</td> 
      <td id="frNos" style="text-align:center">0</td> 
      <td> 
       <div style="float:left">$</div> 
       <div id="frTotal" style="float:right">-</div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

jQueryの変更イベント

$("#fpTotal").change(function(){ 
    alert("The text has been changed."); 
}); 

$("#frTotal").change(function(){ 
    alert("The text has been changed."); 
}); 

Answer 1

あなたは、

var fpRate = document.getElementById('fpRate'); 
 
fpRate.addEventListener('DOMSubtreeModified',function() { 
 
    alert(fpRate.innerHTML); 
 
}); 
 

 

 
var fpNos = document.getElementById('fpNos'); 
 
fpNos.addEventListener('DOMSubtreeModified',function() { 
 
    alert(fpNos.innerHTML); 
 
}); 
 

 

 
function changeCellData(data) { 
 
    fpRate.innerHTML = data; 
 
    fpNos.innerHTML = data; 
 
}

<table class="table table-bordered table-hover table-sm" id="t01"> 
 
     <thead style="text-align:center"> 
 
     <tr> 
 
      <th>Description</th> 
 
      <th>Rate/Unit</th> 
 
      <th>Total No</th> 
 
      <th>Price</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <th>Rate</th> 
 
      <td id="fpRate" style="text-align:right">0</td> 
 
      <td id="fpNos" style="text-align:center">0</td> 
 
      <td> 
 
       <div style="float:left">$</div> 
 
       <div style="float:right" id="fpTotal">-</div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <th >Fractional page rate</th> 
 
      <td id="frRate" style="text-align:right">0</td> 
 
      <td id="frNos" style="text-align:center">0</td> 
 
      <td> 
 
       <div style="float:left">$</div> 
 
       <div id="frTotal" style="float:right">-</div> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<button onClick="changeCellData('1')">Set 1</button>