使用jquery将值设置为颜色网格的td标签 [英] Setting values to the td tag of the color grid using jquery

问题描述

我有一个颜色网格，当我运行程序时，颜色会被混洗。我也有一些具有某些特定值的变量（红色= 2，蓝色= 3，绿色= 4，黄色= 1，橙色= 5，黑色= 1，brown = 6，pink = 5）。现在我希望通过查找颜色将这些值分配给颜色网格的td标签。
Html：

 < table border =5pxwidth =500pxheight =50pxalign = 中心 > 
< tr id =colors> 
< td height =50pxorderId =1bgcolor =red>< / td> 
< td height =50pxorderId =6bgcolor =brown>< / td> 
 
< td height =50pxorderId =5bgcolor =pink>< / td> 
< td height =50pxorderId =0bgcolor =blue>< / td> 
 
< td height =50pxorderId =7bgcolor =black>< / td> 
< td height =50pxorderId =2bgcolor =green>< / td> 
 
< td height =50pxorderId =4bgcolor =orange>< / td> 
< td height =50pxorderId =3bgcolor =yellow>< / td> 
< / tr> 
< / table> 
  

jQuery：
在这里完成颜色混洗并且找到每个单元格的颜色（b）

  $（function（）{
 var arr = []; 
 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），1）; 
 arr.push（colorCells [i] .style.backgroundColor）; //查找每个单元的颜色
} 
 alert （arr）; 
}）; 
  

现在我要将这些值分配给颜色网格
演示： https://jsfiddle.net/pckshu27/5/

解决方案

工作小提琴： https://jsfiddle.net/pckshu27/3 /

这里为了达到您的要求，您需要在JS下添加一个额外的块，并在目前的JS下进行小幅更改。

使用这个 $（colorCells [i]）。attr（bgColor，colors.splice（Math.random（）*（colors.length），1） ）; 代替 colorCells [i] .style.backgroundColor = colors.splice（Math.random（）*（colors.length），1）;


上面的改变必须完成，因为在样式标签下使用bgcolor，检索会产生差异，因为它在 RGB 格式的颜色代码，所以您可以在 TD 下使用 bgColor 属性，th



其他JS块

  var colorValues = {red：2，blue：3，green：4，yellow：，orange：5，black：1，brown ：6，粉红色：5}; 
 $（table td）。each（function（）{
 $（this）.html（colorValues [$（this）.attr（bgColor）]）; 
} ）; 
  

上面的代码考虑了具有所需键和值的数组，并且很简单，如果attr bgColor 值是 red ，它会在数组下找到该键，将数组[red] 作为 TD 下的html。你甚至可以使用 .text（）而不是 .html（）

I have a color grid whose colors get shuffled each time when i run the program.I also have variables with some specific values (red=2,blue=3,green=4,yellow=1,orange=5,black=1,brown=6,pink=5).Now I want these values to be assigned to the td tag of the color grid by finding its color. Html:

<table  border="5px" width="500px" height="50px" align="center">
<tr id="colors">
<td height="50px" orderId="1" bgcolor="red"></td>
<td height="50px" orderId="6" bgcolor="brown"></td>

<td height="50px" orderId="5" bgcolor="pink" ></td>
<td height="50px" orderId="0" bgcolor="blue" ></td>

<td height="50px" orderId="7" bgcolor="black"></td>
<td height="50px" orderId="2" bgcolor="green"></td>

<td height="50px" orderId="4" bgcolor="orange" ></td>
<td height="50px" orderId="3" bgcolor="yellow"></td>
</tr>  
</table>

jQuery: Here the shuffling of colors is done and the color at each cell is found when shuffled.

$(function() {
    var arr = [];
    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),1);
        arr.push(colorCells[i].style.backgroundColor);//finds the color of each cell
    }
    alert(arr);
});

Now I want these values to get assigned to the color grid Demo: https://jsfiddle.net/pckshu27/5/

解决方案

Working fiddle : https://jsfiddle.net/pckshu27/3/

here to achieve your requirement, you need to add up one additional block under JS and a minor change under present JS.

Use of this $(colorCells[i]).attr("bgColor", colors.splice(Math.random() * (colors.length),1)) ; instead of colorCells[i].style.backgroundColor = colors.splice(Math.random() * (colors.length),1);

The above change has to be done, because using bgcolor under style tag, retrieval makes difference, as it returns under RGB format of color code, so instead you can use bgColor an attribute under TD, this makes easy retrieval and without change.

Additional JS block

var colorValues = {"red": 2, "blue":3, "green": 4, "yellow":"", "orange":5, "black":1, "brown":6, "pink":5};
$("table td").each(function() {
    $(this).html(colorValues[$(this).attr("bgColor")]);
});

the above code considers of an array with required keys and values, and pretty simple to be known, as if the attr bgColor value is red, it finds the key under the array, adds the value of Array[red] as the html under the TD. you can even use .text() instead of .html()

这篇关于使用jquery将值设置为颜色网格的td标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！