Identifizieren, wann immer sich der Wert der Tabellenzelle ändert

Ich habe eine Tabelle wie folgt. Wie erkennt man, wenn sich der Wert der Zelle mit id fpTotal und frTotal ändert. Ich habe versucht, mit JQuery Veranstaltung ändern, aber es hat nicht funktioniert. Welche ist die geeignete JS-Funktion?Identifizieren, wann immer sich der Wert der Tabellenzelle ändert

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

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

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

Quelle

2016-04-12 Sam

Wie die Textänderung tut? Außerdem sollten Sie Klassen und keine IDs verwenden. – itdoesntwork

Das Änderungsereignis funktioniert nur bei Eingangstypelementen. Was Sie hier nicht gezeigt haben, ist * wie * sich die Werte an diesen Orten ändern. –

Wenn Sie diese Werte vom Server ändern, müssen Sie diesen Wert irgendwo speichern und danach können Sie dies vergleichen. Wenn Sie versuchen, Div-Element-Änderung zu fangen, ist es unmöglich. –

Sie Ereignis-Listener hinzufügen können, wie etwas unter

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>

Quelle

2016-04-12 20:30:48 pradeep1991singh

Identifizieren, wann immer sich der Wert der Tabellenzelle ändert

Antwort

Verwandte Themen