使用jquery隐藏td标签的值 [英] Hide the values of a td tag using jquery
问题描述
这是我的小提琴 https://jsfiddle.net/tuc1faug/1/
在这里,我已经使用jQuery分配了具有特定值的颜色。
颜色每次都会被洗牌。现在,我希望这些值能够隐藏在单元格中,并且我希望所有这些值都以该洗牌顺序存储到数组中。
Html:
Here's my fiddle https://jsfiddle.net/tuc1faug/1/ Here I have assigned the colors with the specific values using jquery. Colors will be shuffled each time.Now i want these values to be hidden in the cells and I want all those values to be stored into an array in that shuffled order 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:
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]).attr("bgColor", colors.splice(Math.random() * (colors.length),1)) ;
arr.push(colorCells[i].style.backgroundColor);
}
var colorValues = {"red": 2, "blue":3, "green": 4, "yellow":"1", "orange":5, "black":1, "brown":6, "pink":5};
$("table td").each(function() {
$(this).html(colorValues[$(this).attr("bgColor")]);
});
推荐答案
我编辑了你的函数。如果我能够正确理解你的问题,那么你需要颜色的随机数字应该存储在数组中,并且你应该隐藏显示的数字。
I have edited your function. If I am understood your question correctly, you need random numbers for color should be stored in array and you should hide numbers from display.
如果所以,下面是代码
$(function() {
var arr=[];
// New array for adding the color number
var colorNumber = [];
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++) {
var randomColor = Math.random() * (colors.length);
$(colorCells[i]).attr("bgColor", colors.splice(Math.random() * (colors.length),1)) ;
arr.push(colorCells[i].style.backgroundColor);
}
var colorValues = {"red": 2, "blue":3, "green": 4, "yellow": 7, "orange":5, "black":1, "brown":6, "pink":8};
$("table td").each(function() {
// Get the color value from the array and add it in colour numbers array.
colorNumber.push(colorValues[$(this).attr("bgColor")]);
// Hide it from display.
//$(this).html(colorValues[$(this).attr("bgColor")]);
});
// Your colorNumber array.
alert(colorNumber);
});
请参阅编辑 小提琴 。
See the edited Fiddle.
这篇关于使用jquery隐藏td标签的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!