各配列要素をアニメーション化します。

Question

気象学のjsonデータを配列に変換し、テーブル形式で表示しました。それが動作し、それが表示されます。しかし、風向きには問題があります。風の方向は数値ではなくアニメーションとして表示されます。風速と風向きは1つのテーブルセルに表示する必要があります。私は1つのセルに表示するように管理しました。フェードインやアウトのような風向きをアニメーションに変換したい。しかし、私はどのように各配列要素にアニメーションを追加するか考えています。

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クラスのデータを表示または非表示にします。