JQuery

Question

kullanarak renk ızgarasının td etiketine değerleri ayarlama Programı çalıştırdığımda renkleri her seferinde karıştırılan bir renk ızgaram var. Ayrıca bazı özel değerlere sahip değişkenlerim var (kırmızı = 2, mavi = 3, yeşil) = 4, sarı = 1, turuncu = 5, siyah = 1, kahverengi = 6, pembe = 5) .Şimdi bu renklerin rengini bularak renk kılavuzunun td etiketine atanmasını istiyorum. 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: İşte renklerin karıştırma yapılır ve dağıtıldığında hatasız her hücredeki renk bulunur. https://jsfiddle.net/pckshu27/5/

Answer 1

Çalışma keman: Burada

https://jsfiddle.net/pckshu27/3/ gereksinimi ulaşmak için, sen altında bir ek bloğunu eklemem gerekiyor

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

Şimdi bu değerler Demo renk ızgara atanmış olsun istiyorum JS ve mevcut JS altında küçük bir değişiklik. Yukarıdaki değişim, geri alma fark yaratıyor stil etiketi altında bgcolor kullanarak çünkü renk kodunun RGB biçimi altında döner gibi, yapılması gereken, bu nedenle bunun yerine bgColor kullanabileceğiniz bu $(colorCells[i]).attr("bgColor", colors.splice(Math.random() * (colors.length),1)) ; yerine colorCells[i].style.backgroundColor = colors.splice(Math.random() * (colors.length),1);

arasında

Kullanımı TD altında bir özellik, bu kolay alma ve değişiklik yapmadan yapar.

ek JS blok Yukarıdaki kod gerekli şifreler ve değerleri ve bir dizi dikkate

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 değeri red olduğu gibi, bu altında anahtarı bulur bilinen oldukça basit dizi, değerini TD altında html olarak ekler. .html()