Анимация каждого элемента массива Javascript

Question

Я преобразовал данные метеоролога json в массив и отображение в виде таблицы. Он работает и отображается. Но у меня проблема с направлением ветра. Направление ветра должно отображаться как анимация вместо численного числа. Скорость ветра и направление ветра должны отображаться в одной ячейке таблицы. Мне удалось отобразить в одной ячейке. Я хочу преобразовать направление ветра в анимацию, например, затухание или выход. Но я не знаю, как добавить анимацию к каждому элементу массива.

function createTable(){ 
     var table = document.getElementById("wData"); /* */ 
     var days = convertToDay(); /*days where Metrology data collected */ 
     var windS = returnWSpeed() /*speed of wind */ 
     var average = returnAveargeTempreatur(); /* average tempreature*/ 
     var max = returnMaxTempreture(); /* maximum tempreture*/ 
     var wd = returnWD(); /* wind direction*/ 
     for(i = 0 ; i < 10; ++i){ 
     var row = table.insertRow(i); 
     var cell1 = row.insertCell(0); 
     cell1.id = 'cell' + 0; 
     cell1.style.border = '1px solid black'; 
     var cell2 = row.insertCell(1); 
     cell2.id = 'cell' + 1; 
     cell2.style.border = '1px solid black'; 
     var cell3 = row.insertCell(2); 
     cell3.id = 'cell' + 2; 
     cell3.style.border = '1px solid black'; 
     var cell4 = row.insertCell(3); 
     cell4.id = 'cell' + 3; 
     cell4.style.border = '1px solid black'; 
     cell4.style.height ='80px' 
     cell1.innerHTML = days[i]; 
     cell2.innerHTML = max[i]; 
     cell3.innerHTML = average[i]; 
     cell4.innerHTML = wd[i] + "<br />" + windS[i];/*animate wd[i]*/ 
     } 

    } 

Answer 1

Это моя идея ...

HTML:

<table id="tab101"> 
<tr> 
<th>Day</th> 
<th>Maximum temperature</th> 
<th>Average temperature</th> 
<th>Wind direction</th> 
</tr> 
<tbody id="wData"></tbody> 
</table> 

CSS:

th,tr{ 
    border: 1px solid black; 
    height: 50px; 
    padding: 15px; 
    text-align: left; 


} 

JS:

function createTable(){ 
     var table = document.getElementById("wData"); /* */ 
     var days = ['M', 'T', 'W', 'Th', 'Fr', 'Sa', 'Sun', 'M', 'T', 'w']; 
     var windS = [6,7,4,4,5,1,8,9,10,11] /*speed of wind */ 
     var average = [10,12,5,6,7,5,10,8,9,10]; /* average wind*/ 
     var max = [8,12,13,20,9,15,15,31,18,20]; /* maximum tempreture*/ 
     var wd = [200,210,250,201,301, 209,159,317,218,202]; /* wind direction*/ 
     for(i = 0 ; i < 10; ++i){ 
     var row = table.insertRow(i); 
     var cell1 = row.insertCell(0); 
     cell1.id = 'cell' + 0; 
     cell1.style.border = '1px solid black'; 
     var cell2 = row.insertCell(1); 
     cell2.id = 'cell' + 1; 
     cell2.style.border = '1px solid black'; 
     var cell3 = row.insertCell(2); 
     cell3.id = 'cell' + 2; 
     cell3.style.border = '1px solid black'; 
     var cell4 = row.insertCell(3); 
     cell4.id = 'cell' + 3; 
     cell4.style.border = '1px solid black'; 
     cell4.style.height ='80px' 
     cell1.innerHTML = days[i]; 
     cell2.innerHTML = max[i]; 
     cell3.innerHTML = average[i]; 
     cell4.innerHTML = "<div class='animWD'>" + wd[i] + "</div>" + "<br />" + windS[i]; /* i wann animate wd[i] elements*/ 
     } 

    } 

createTable(); 
function anim(){ $(".animWD").toggle("slow"); } 
let int = setInterval(anim, 1000); 

Каждые 1000 миллисекунд показывают или скрывают данные с помощью класса animWD.