使用jquery将值设置为颜色网格的td标记

-1

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

<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：这里的颜色洗牌完成且改组时，在每个单元的颜色被发现。

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

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

来源

2016-04-04 Preethi

你在哪里放置'（red = 2，blue = 3）'颜色的值？ – ameenulla0007

再次检查小提琴。我已更新。 – Preethi

那么你想要发生什么？似乎你已经将颜色分配给了''元素？ – aphextwix

工作小提琴：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格式，因此，你可以使用bgColor一个TD下的属性，这使得容易检索，没有改变。

附加JS块

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

上述代码认为阵列的与所需的键和值，并且相当简单是已知的，就好像ATTR bgColor值为red，它找到下的键该数组将Array[red]的值添加为TD下的html。你甚至可以使用.text()而不是.html()

来源

2016-04-04 17:51:12 ameenulla0007

谢谢！你已经在单元格内显示了这些值。但是如果我必须单独提醒它，表明每种颜色都被赋予了它们的特定值 – Preethi

'alert（$（this）.attr（“bgColor”）+“赋值为”+ colorValues [$（this）.attr（“bgColor”）]）;'用这个来提醒 – ameenulla0007

我们可以将它存储在数组中，例如颜色名称和值 – Preethi

使用jquery将值设置为颜色网格的td标记

回答

相关问题