检测HTML表格单元格的textContentvalue的更改并将动画应用于更改的数据

问题描述

我刚刚使用Javascript编写了HTML表。并且表格的单元格数据每隔2秒通过API（一些统计数字数据）更新一次，这是我的代码：

function dataRenew {
  for(var i = 0;i < fooArray.length; i++) {
    var id = fooArrayID[i];
    document.getElementById(id).textContent = fooArray[i].someStatisticNumber;
    // id is for each cell
  }
}
//....
setInterval(function () {
  dataRenew();
},2000);

效果很好。但是我想根据单元格的数据更改添加动画或某些效果，就像：

通过API将单元格数据更新为“新数据”时，单元格的背景色将逐渐淡出并逐渐淡入。

console.log('Look ma,no JavaScript!');

@-webkit-keyframes invalid {
  from { background-color: red; }
  to { background-color: inherit; }
}
@-moz-keyframes invalid {
  from { background-color: red; }
  to { background-color: inherit; }
}
@-o-keyframes invalid {
  from { background-color: red; }
  to { background-color: inherit; }
}
@keyframes invalid {
  from { background-color: red; }
  to { background-color: inherit; }
}
.invalid {
  -webkit-animation: invalid 1s infinite; /* Safari 4+ */
  -moz-animation:    invalid 1s infinite; /* Fx 5+ */
  -o-animation:      invalid 1s infinite; /* Opera 12+ */
  animation:         invalid 1s infinite; /* IE 10+ */
}
td {
  padding: 1em;
}

<table>
  <tr>
    <td>true</td>
    <td class="invalid">false</td>
    <td>true</td>
    <td>true</td>
  </tr>
</table>

这个示例不是更新数据，但是动画只是我想要的，无论如何这只是一个效果示例，我只想知道当单元格数据更改时如何应用该效果。

首选Vanilla JS，但jQuery可以

解决方法

您可能正在寻找MutationObserver，它提供了监视DOM树所做更改的功能。如果您想观察innerHTML的更改，则必须设置subtree: true。

thx至Jax-p

这只是我的代码

td {
  transition: all 0.5s;
}

var config = {
  childList: true,};

$(".fooID").each(function () { // fooID is td's id value
  var target = this;
  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      // console.log(mutation.target);
      // console.log(mutation.removedNodes[0].data); // mutation.removedNodes[0].data = old value
      // console.log(mutation.target.textContent); // mutation.target.textContent = new value
      if (
        parseFloat(mutation.target.textContent) <
        parseFloat(mutation.removedNodes[0].data)
      )
        mutation.target.style.color = "blue";
      else mutation.target.style.color = "red";
      setTimeout(function () {
        mutation.target.style.color = "black";
      },300);
    });
  });

html javascript