Animiere jedes Array Element Javascript

Question

Ich habe meteorolog json Daten in Array umgewandelt und in Tabellenform angezeigt. Es funktioniert und es wird angezeigt. Aber ich habe Probleme mit der Windrichtung. Die Windrichtung sollte als Animation anstelle der numerischen Nummer angezeigt werden. Windgeschwindigkeit und Windrichtung sollten in einer einzigen Tabellenzelle angezeigt werden. Ich habe es geschafft, in einer einzigen Zelle zu erscheinen. Ich möchte die Windrichtung in Animation umwandeln, wie Ein- oder Ausblenden. Aber ich habe keine Ahnung, wie man jedem Array-Element Animationen hinzufügen kann.

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

Das ist meine Idee ...

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

Alle 1000 Millisekunden zeigen oder verbergen Sie die Daten mit der Klasse animWD.