JavaScript: переход из одного тела таблицы в другое - PullRequest
Новая
       18

JavaScript: переход из одного тела таблицы в другое

0 голосов
/ 31 мая 2019

Я заполняю свою таблицу с помощью 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;

Как я могу исчезнуть между двумя версиями?Как, например, когда у меня появляются новые данные, как я могу скрыть текст между старым и новым?

Основное требование здесь - добавить данные хорошим способом.Если есть еще лучшее решение, пожалуйста, не стесняйтесь указывать мне на это!

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 31 мая 2019

Вот пример того, как вы можете создать эффект затухания с помощью 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>
...