Question

我有一张表如下。如何在id为fpTotal和frTotal的单元格值发生变化时进行识别。我试过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

您可以添加事件监听器，如下所示

＆＃13;

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;
}

＆＃13;

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

＆＃13;

只要表格单元格值发生变化，即可识别

1 个答案: