Question

我创建了一个包含2行和7列的表。在第1行中，每个单元格将采用不同的颜色。在第2行中，我创建了一个文本框。现在我希望我的第1行颜色可以使用jquery或javascript进行洗牌.ie颜色应放在不同的细胞中。这是我的颜色表的代码

<div class="form-group" >
<label class="control-label col-sm-2" for="pwd" style="color:#FFFFFF" > Color Password:</label>
<div class="col-sm-5">
<table  border="5px" width="300px" height="50px" align="center">
<tr>
<label><td bgcolor="blue" height="25px" ></td></label>
<label><td bgcolor="red" height="25px" ></td></label>

<label><td bgcolor="green" height="25px" ></td></label>
<label><td bgcolor="yellow" height="25px" ></td></label>

<label><td bgcolor="orange" height="25px" ></td></label>
<label><td bgcolor="black" height="25px" ></td></label>

<label><td bgcolor="pink" height="25px"></td></label>
<label><td bgcolor="brown" height="25px"></td></label>
</tr>
<tr>
<td> <input type="text" size="4" name="blue"></td>
<td> <input type="text" size="4" name="red"></td>
<td> <input type="text" size="4" name="green"></td>
<td> <input type="text" size="4" name="yellow"></td>
<td> <input type="text" size="4" name="orange"></td>
<td> <input type="text" size="4" name="pink"></td>
<td> <input type="text" size="4" name="brown"></td>

</tr>
</table>

</div></div>

这是我的输出：https://jsfiddle.net/xhoqhk8a/ 现在我希望所有这些颜色都可以洗牌。任何人都可以帮助我。

Answer 1

你可以像这样（使用jQuery）

来减少背景颜色

var colorCells = $('#colors > td');
$.each(colorCells, function(idx){
  $(colorCells[idx]).css("background-color", '#'+Math.random().toString(16).slice(-6));
})

https://jsfiddle.net/xhoqhk8a/2/

或者没有jQuery：

var colorCells = document.getElementById('colors').getElementsByTagName('td');
for(var i = 0; i < colorCells.length; i++){
    colorCells[i].style.backgroundColor = '#'+Math.random().toString(16).slice(-6);
}

如果这是您想要使用的所有JavaScript代码，我建议不要使用纯JavaScript版本。

修改：

如果你只想使用一组固定的颜色：

var colorCells = document.getElementById('colors').getElementsByTagName('td'); var colors = ["blue","red","green","yellow","orange","pink","brown","black"]; for(var i = 0; i < colorCells.length; i++){ colorCells[i].style.backgroundColor = colors.splice(Math.random() * (colors.length - 0) + 0,1); }

洗牌的颜色

1 个答案: