Zuweisen von Tabellenzellen Farben auf der Grundlage von Bedingung - JavaScript

Question

Hier habe ich ein Textfeld, das eine Zahl nimmt dann basierend darauf zeigt eine Tabelle mit Zufallszahlen nach einem Klick auf eine Schaltfläche. Nun, was ich versuche zu erreichen, ist im Grunde entweder blau oder rot hinzuzufügen, wenn die Zufallszahl innerhalb der Zelle (num% 3 == 0) oder (num% 2 == 0) ist. Dann später wird der Durchschnitt aller Zahlen unterhalb der Tabelle angezeigt. Ich bin schon eine ganze Weile hier festgefahren, also dachte ich, ich hätte um Hilfe gebeten. Irgendwelche Tipps, wie ich das angehen kann?

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

Dies sollte funktionieren - wir eine Variable hinzugefügt, um die Summe der iterierten Zahlen zu speichern (die durchschnittliche später berechnen), und legen Sie Hintergrund-Farbe auf die entsprechende Farbe, während sie über die iteriert Knoten.

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, so fügt das folgende Beispiel die Klassen, die Sie einfach cell.className verwenden möchten. Dazu verschiebt es die bg Berechnung in die for-Schleife.

Sie haben auch nicht den Wert getRandom in Ihrem cellText verwendet. Wir verwenden diesen Wert auch, um die bg zu berechnen.

Zu beachten: Wenn Sie den Wert einer Variablen außerhalb eines gegebenen Codeblocks verwenden möchten, empfiehlt es sich, diese Variable oben im Block zu definieren, in der Sie sie abrufen müssen.

Wenn Sie weitergehen wollen, um die Durchschnittswerte der Zahlen zu berechnen, müssen Sie beginnen, jeden Wert zu speichern, wie er in einem Array erstellt wird. Sobald alle Zeilen generiert wurden, können Sie anhand dieser Werte eine letzte Zeile berechnen.

Hoffe, dass hilft!

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>