tr和td的着色随机颜色表[重复]答案

【问题标题】：Coloring random color table of tr and td [duplicate]tr和td的着色随机颜色表[重复]
【发布时间】：2019-03-19 11:07:26
【问题描述】：

这是我的代码：

var colors = ["red","blue","green"];
    function RandomColor(){
        var x = document.body.table.tr.td;
        var index = Math.floor(Math.random()*10);
        x.style.backgroundColor=colors[index];

    }

<table border="1" width="200" hight="100">
        <tr>
            <td id="demo">Moustafa</td>
            <td>Java</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>Moustafa</td>
            <td>Java</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>Moustafa</td>
            <td>Java</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>Moustafa</td>
            <td>Java</td>
            <td>Html</td>
        </tr>


    </table>
    <button onclick="RandomColor()">Try it</button>

我尝试实现这种方法，它为表 (tds) 的每个元素着色，给它 3 种颜色，我需要使用 java 脚本中的随机方法来实现它，并在每次按下 try it 按钮时给我不同的颜色。谢谢

【问题讨论】：

现在不要放弃，你已经接近了。首先，您需要选择所有要着色的元素 - document.querySelector 然后您需要生成随机颜色。 CSS 颜色由 4 个值组成，但您只需要担心其中的 3 个 RGB。每个字母代表一种原色，其值介于 0 到 255 之间。如果您阅读了查询选择器、css 颜色以及如何使用 JavaScript 修改 css 颜色，您可以这样做

标签： javascript html

【解决方案1】：

选择表格并遍历所有 tr 以应用颜色。您错误地选择了 tr 和 td 元素。使用document.querySelector 或document.querySelectorAll 获取它们计算一个因子为 10 的随机数通常会给出数组中不存在的索引。而是使用数组的长度相乘。选择所有 td 元素后，使用 forEach 循环遍历它们并应用 bg 颜色并在适当位置计算随机索引，而不是在循环之前计算它。对于循环内的代码来说，之前计算它实际上并不是“随机”的

var colors = ["red", "blue", "green","orange","yellow","violet","lightblue","cyan","magenta"];
function RandomColor() {
  var x = document.querySelector('table');
  x.querySelectorAll('tr > td').forEach(e => e.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)])

}

<table border="1" width="200" hight="100">
  <tr>
    <td id="demo">Moustafa</td>
    <td>Java</td>
    <td>Html</td>
  </tr>
  <tr>
    <td>Moustafa</td>
    <td>Java</td>
    <td>Html</td>
  </tr>
  <tr>
    <td>Moustafa</td>
    <td>Java</td>
    <td>Html</td>
  </tr>
  <tr>
    <td>Moustafa</td>
    <td>Java</td>
    <td>Html</td>
  </tr>


</table>
<button onclick="RandomColor()">Try it</button>

【讨论】：

这个答案最好解释一下你做了什么
非常感谢。

【解决方案2】：

您不能只访问 DOM 元素，例如 javascript 中的属性。要获取 DOM 元素，最简单的方法是使用 querySelector() 或 querySelectorAll() 方法。（请参阅此处的文档：https://developer.mozilla.org/de/docs/Web/API/Document/querySelector）

在你的情况下，你会得到像这样的所有 td 元素：

 var x = document.querySelectorAll('table td');

这将返回一个 NodeList，其中包含所有找到的 td。你可以像这样遍历它们：

x.forEach(function( td ){
    var index = getRandomIntInclusive( 0, colors.length-1 ); // random int between 0 and 2
    td.style.backgroundColor = colors[index];
});

将所有这些都放在您的 RandomColor 函数中，以便在点击时运行它。

还可以查看这个取自 MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 的随机函数，它会为您提供给定范围内的随机数：

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
}

我添加了随机函数，因为您的返回值介于 0 和 10 之间，但您的颜色数组仅包含 3 个元素。

【讨论】：