jqueryを使用してカラーグリッドのtdタグに値を設定

Question

私はプログラムを実行するたびに色がシャッフルされるカラーグリッドを持っています。また、いくつかの特定の値（赤= 2、青= 3、緑= 4、黄色= 1、オレンジ= 5、黒色= 1、茶色= 6、ピンク= 5）。これらの値をカラーグリッドのtdタグに割り当てます。 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：ここ 色のシャッフリングが行われ、シャッフル場合、各セルの色が見出されます。 https://jsfiddle.net/pckshu27/5/

Answer 1

ワーキングフィドル：ここ

https://jsfiddle.net/pckshu27/3/はあなたの条件を達成するために、あなたは下の一つの追加のブロックを追加する必要が

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

は今、私は、これらの値は デモカラーグリッドに割り当てられて取得したいですJSと現在のJSのマイナーチェンジ。

スタイルタグの下BGCOLORを使用して、それがカラーコードのRGBフォーマットの下で返すよう検索が、違いは、その代わりに、あなたはbgColorを使用することができますので、上記の変更は、行われなければならない代わりにcolorCells[i].style.backgroundColor = colors.splice(Math.random() * (colors.length),1);

のこの$(colorCells[i]).attr("bgColor", colors.splice(Math.random() * (colors.length),1)) ;の使用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として追加します。