如果随机数字是3-Javascript的倍数，则将表单元格更改为红色

Changing table cell to red if the random num is a multiple of 3 - Javascript

本文关键字：单元格 表单 红色 数字 随机 3-Javascript 如果      更新时间：2023-12-13

这是我的第一个JS项目，我的任务是制作一个随机生成从1到100的数字的表，并将3的倍数单元格的背景色更改为红色，将2的倍数单元格更改为蓝色。我可以用随机数字创建表格，但不知道如何更改单元格的背景色。这是我的桌子代码。

  // creates a string var that holds the table
    var str = "<table border='1'>";
    for (row = 0; row < num; row++) {
        str += "<tr>";
        for (col = 0; col < num; col++) {
            str += "<td>";
            // creates a random number from 1-100
            var randNum = Math.floor(Math.random() * 100) + 1;
            str += randNum;
            // if a random num is a multiple of 3
            if (randNum%3 === 0) {
                // make cell have red background
            }
                    // if a random number is a multiple of 2
            else if (randNum%2 === 0) {
                // make cell have blue background
           }
            str += "</td>";
        }
        str += "</tr>";
    }
    str += "</table>";

我尝试设置<td>，id="，然后在if语句中像那样调用它，但它不起作用。

               str += "<td id='redOrBlue'>";
            // creates a random number from 1-100
            var randNum = Math.floor(Math.random() * 100) + 1;
            str += randNum;
            // if a random num is a multiple of 3
            if (randNum%3 === 0) {
                // make cell have red background
              document.getElementById('redOrBlue').style.backgroundColor='red';
            }
                    // if a random number is a multiple of 2
            else if (randNum%2 === 0) {
                // make cell have blue background
                document.getElementById('redOrBlue').style.backgroundColor='blue';
           }
            str += "</td>";

如有任何帮助，我们将不胜感激。

http://pastebin.com/EueJtT9n-完整程序代码

如果您将td创建放入If-else语句中，则可以简单地执行以下操作：

HTML

<div id="mainDiv">
  <input type="text" id="myNo" />
  <input type="button" id="gridSize" value="Show It" />
</div>
<div id="result"></div>

JS-

var button = document.getElementById('gridSize');
button.onclick = function(e) {
  result = document.getElementById('result');
  num = parseInt(document.getElementById('myNo').value);
  alert(num);
  if (isNaN(num)) {
    alert("No Numeric Value!");
  } else {
    result.innerHTML = num;
  }
  var str = "<table border='2'>";
  for (row = 0; row < num; row++) {
    str += "<tr>";
    for (col = 0; col < num; col++) {
      var randNum = Math.floor(Math.random() * 100) + 1;
      if (randNum % 2 === 0) {
        str += '<td style="background: red;">';
      } else if (randNum % 3 === 0) {
        str += '<td style="background: blue;">';
      } else {
        str += "<td>";
    }
    str += randNum + "</td>";
    }
    str += "</tr>";
  }
  str = str + "</table>";
  result.innerHTML = str;
}

jsfiddle此处

我会坚持你在第一次努力中所做的。在开始之前只添加一些CSS，类.blue cell和.red cell

这将稍微改变你的逻辑，因为你需要：

1） 将开头的"td"添加到字符串中

2） 生成进入单元格的号码

3） 将"class="红细胞/蓝细胞">"添加到字符串

4） 将数字添加到字符串

5） 关闭标签"td"

尝试在for循环中使用以下代码：

            str += "<td"; //Notice how we leave out the second bracket for now
            // creates a random number from 1-100
            var randNum = Math.floor(Math.random() * 100) + 1;
            // if a random num is a multiple of 3
            if (randNum%3 === 0 && randNum%2 === 0) {
                str += ' style="background-color:purple"';
            } else if (randNum%3 === 0) {
                //Add an inline style to change the background colour
                str += ' style="background-color:red"';
            } else if (randNum%2 === 0) {
                //Add an inline style to change the background colour
                str += ' style="background-color:blue"';
            }
            str += ">" + randNum + "</td>"; //Now we add the missing bracket in here

这段代码所做的是，当我们检查条件（随机数）时，保持td元素打开，为其添加属性。

我尝试设置<td>，id="，然后在if语句中像那样调用它，但它不起作用。

当你仔细想想，这实际上是有道理的，这不起作用。id是DOM（文档对象模型）的一个元素的属性，它本质上是Javascript访问网页的方式。当您尝试使用给定的id获取元素时，它失败了，因为DOM中不存在该元素——目前它只是一个字符串变量。

为了让这个方法发挥作用，你必须将"表字符串"添加到DOM和中，然后你就可以访问和更改元素的ID属性。我制作了一个JSFiddle，通过使用id修改方法来模仿您想要的行为。

相关文章：