条件に基づいてテーブルセルの色を割り当てる - JavaScript

Question

ここでは、ボタンをクリックした後に乱数を持つテーブルを表示する数値をとるテキストボックスがあります。それで、今私が達成しようとしているのは、セル内の乱数が（num％3 == 0）または（num％2 == 0）の場合、基本的に青または赤を追加することです。その後、テーブルの下のすべての数値の平均を表示します。私はしばらくこのことに固執していたので、私は助けを求めました。どのように私はこれに近づくことができるかについてのヒント？

var min = 1; 
 
var max = 100; 
 

 
function drawTable() { 
 
    //Get the div reference for the body 
 
    var div1 = document.getElementById('tableDiv'); 
 

 
    //Creates a table element 
 
    var tbl = document.createElement("table"); 
 

 
    var totalRows = parseInt(document.getElementById("inputBox").value); 
 
    var cellsInRow = parseInt(document.getElementById("inputBox").value); 
 

 
    //Creating rows 
 
    for (var rows = 0; rows < totalRows; rows++) { 
 
    var row = document.createElement("tr"); 
 

 
    /*if (rows % 3 == 0) 
 
    { 
 
     //background 
 
     bg = "class='red'";  
 

 
    } 
 
    else { 
 
     bg = "class='blue'"; 
 
    }*/ 
 

 
    //Create cells in row 
 
    for (var cells = 0; cells < cellsInRow; cells++) { 
 

 
     var cell = document.createElement("td"); 
 
     getRandom = Math.floor(Math.random() * (max - min + 1)) + min; 
 

 
     var cellText = document.createTextNode(Math.floor(Math.random() * (max - min + 1)) + min); 
 

 
     cell.appendChild(cellText); 
 
     row.appendChild(cell); 
 
    } 
 
    //Add the row to the end of the table body 
 
    tbl.appendChild(row); 
 
    } 
 
    //Appends <table> into the <div> 
 
    div1.appendChild(tbl); 
 
}

<input type="text" value="" id="inputBox"> 
 
<input type="button" value="Generate Grid" id="generateBtn" onclick="drawTable()"> 
 

 
<div id="tableDiv"> 
 
</div>

Answer 1

これは動作するはず - （後に平均値を計算するために）我々は、反復数の和を格納する変数を追加し、そして反復処理しながら、適切な色に背景色を設定しますノード。

var min = 1; 
 
var max = 100; 
 

 
function drawTable() { 
 
    var div1 = document.getElementById('tableDiv'); 
 

 
    var tbl = document.createElement("table"); 
 

 
    var totalRows = parseInt(document.getElementById("inputBox").value); 
 
    var cellsInRow = parseInt(document.getElementById("inputBox").value); 
 

 
    var sum = 0; // Store sum of numbers 
 

 
    for (var rows = 0; rows < totalRows; rows++) { 
 
    var row = document.createElement("tr"); 
 

 
    for (var cells = 0; cells < cellsInRow; cells++) { 
 

 
     var cell = document.createElement("td"); 
 
     var randomNum = Math.floor(Math.random() * (max - min + 1)) + min; 
 
     sum += randomNum; // Increment sum 
 
     if (randomNum % 3 === 0) { 
 
      cell.setAttribute("style", "background-color:red") 
 
     } 
 
     else if (randomNum % 2 === 0) { 
 
      cell.setAttribute("style", "background-color:lightblue") 
 
     } 
 

 
     var cellText = document.createTextNode(randomNum); 
 

 
     cell.appendChild(cellText); 
 
     row.appendChild(cell); 
 
    } 
 
    tbl.appendChild(row); 
 
    } 
 
    //Appends <table> into the <div> 
 
    div1.appendChild(tbl); 
 
    var avg = sum/(totalRows * cellsInRow); // Calculate avarage 
 
    div1.appendChild(document.createTextNode("Average: " + avg)) // Add average text 
 
}

<input type="text" value="" id="inputBox"> 
 
<input type="button" value="Generate Grid" id="generateBtn" onclick="drawTable()"> 
 

 
<div id="tableDiv"> 
 
</div>

Answer 2

OK、以下の例では、あなたは、単にcell.classNameを使用したいクラスを追加しますので。これを行うには、bgの計算をforループに移動します。

また、cellTextにはgetRandomの値を使用していませんでした。この値を使用してbgを計算します。

心に留めておきたいのは、あるコードブロックの外にある変数の値を使いたい場合、その変数をブロックの先頭に定義することをお勧めします。

数値の平均値を計算するには、配列に作成された値を保存する必要があります。すべての行が生成されたら、これらの値に基づいて最終行を計算できます。

希望に役立ちます！

var min = 1; 
 
var max = 100; 
 

 
function drawTable() { 
 
    //Get the div reference for the body 
 
    var div1 = document.getElementById('tableDiv'); 
 

 
    //Creates a table element 
 
    var tbl = document.createElement("table"); 
 

 
    var totalRows = parseInt(document.getElementById("inputBox").value); 
 
    var cellsInRow = parseInt(document.getElementById("inputBox").value); 
 

 
    //Creating rows 
 
    for (var rows = 0; rows < totalRows; rows++) { 
 
    var row = document.createElement("tr"); 
 

 
    //Create cells in row 
 
    for (var cells = 0; cells < cellsInRow; cells++) { 
 

 
     var cell = document.createElement("td"); 
 
     var getRandom = Math.floor(Math.random() * (max - min + 1)) + min; 
 

 
     var cellText = document.createTextNode(getRandom); 
 
     var bg = ''; 
 

 
     if (getRandom % 3 == 0) 
 
     { 
 
      //background 
 
      bg = 'red'; 
 
     } 
 
     else if (getRandom % 2 == 0) { 
 
      bg = 'blue'; 
 
     } else { 
 
      bg = ''; 
 
     } 
 

 
     cell.appendChild(cellText); 
 
     cell.className = bg; 
 
     row.appendChild(cell); 
 
    } 
 
    //Add the row to the end of the table body 
 
    tbl.appendChild(row); 
 
    } 
 
    //Appends <table> into the <div> 
 
    div1.appendChild(tbl); 
 
}

<input type="text" value="" id="inputBox"> 
 
<input type="button" value="Generate Grid" id="generateBtn" onclick="drawTable()"> 
 

 
<div id="tableDiv"> 
 
</div>