Question

这里我有一个文本框，它取一个基于的数字，在单击一个按钮后显示一个带随机数的表。完成后，如果单元格内的随机数为（num％3 == 0）或（num％2 == 0），我现在试图实现的基本上是添加蓝色或红色。然后显示表格下方所有数字的平均值。我已经坚持了一段时间了，所以我想我求救了。关于我如何处理这个问题的任何提示？

＆＃13;

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

＆＃13;

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

＆＃13;

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

好的，所以下面的示例只使用cell.className添加您想要的类。为此，它将bg计算移动到for循环中。

此外，您还没有在getRandom中使用cellText的值。然后我们也使用此值来计算bg。

要记住：如果您想在给定代码块之外使用变量的值，那么在块的顶部定义该变量是一个好习惯，您需要在其中调用它。 / p>

如果您想进一步计算出数字的平均值，您必须开始保存每个值，因为它是为数组创建的。生成所有行后，您可以根据这些值计算最终行。

希望有所帮助！

＆＃13;

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

＆＃13;

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

＆＃13;

根据条件分配表格单元格颜色 - JavaScript

2 个答案: