时间戳

首页 > 解决方案 > JavaScript：从一个表格主体淡入到另一个表格主体

javascript - JavaScript：从一个表格主体淡入到另一个表格主体

问题描述

我正在使用 AJAX 填充我的表，我将数据作为 JSON 返回，我想用新数据更新我的表。

这很容易，我这样做是为了：

var output= "";

        for (var i = 0; i < content.flights.length; i++) {
            output+= "<tr><td>";
            output+= content.flights[i].id;
            output+= "</td></tr>";
        }
document.getElementById("flights").tBodies[0].innerHTML = output;

我怎样才能在两个版本之间淡出呢？例如，当我有新数据时，如何淡化旧数据和新数据之间的文本？

这里的基本要求是以一种很好的方式添加数据。如果有更好的解决方案，请不要犹豫，指出我的方向！

谢谢你的帮助！

标签： javascriptcssajaxfade

解决方案

这是一个如何使用 css 制作淡入淡出效果并从服务器获取数据的示例。

单击底部的“获取新数据”后，将发送新请求并重新加载表格

const fetchData = () => {
  fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
    var output= "";

    for (var i = 0; i < users.length; i++) {
        output+= "<tr><td>";
        output+= users[i].name;
        output+= "</td></tr>";
    }
    document.getElementById("table").tBodies[0].innerHTML = output;

    setTimeout(() => {
      document.getElementById("table").tBodies[0].classList.remove('fade-out'); 
    }, 400); // time for animation
})
}

document.getElementById('newDataBtn').addEventListener('click', function() {
    document.getElementById("table").tBodies[0].classList.add('fade-out');
    fetchData();
});

fetchData();
.t-body {
  opacity: 1;
  transition: opacity .5s;
}

.t-body.fade-out {
  opacity: 0;
  transition: opacity .5s;
}
<div id="root">

  <table id="table">
    <tbody class="t-body" id="tBody">
    </tbody>
  </table>

  <button id="newDataBtn">Get new data</button>

  
</div>

推荐阅读