使用 jquery 隐藏 td 标签的值答案

【问题标题】：Hide the values of a td tag using jquery使用 jquery 隐藏 td 标签的值
【发布时间】：2016-04-05 09:33:12
【问题描述】：

这是我的小提琴https://jsfiddle.net/tuc1faug/1/ 在这里，我使用 jquery 为颜色分配了特定的值。每次颜色都会被打乱。现在我希望将这些值隐藏在单元格中，并且我希望所有这些值都以打乱的顺序存储到数组中 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")]);
});

【问题讨论】：

现在颜色值是硬编码的吗？说red是2？
每当我改变它时它可能会改变
你能解释一下你在做什么。我不确定我是否跟随。
@Preethi 所以你正在从java variable 填充这个数组，正如我们看到的here
`我希望所有这些值都以打乱顺序存储到一个数组中 Html:`这是什么意思？

标签： jquery html shuffle assign

【解决方案1】：

我已经编辑了你的函数。如果我正确理解了您的问题，您需要将颜色的随机数存储在数组中，并且您应该从显示中隐藏数字。

如果是，下面是代码

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

查看编辑后的Fiddle。

【讨论】：

【解决方案2】：

这是您需要的代码：

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>

	function shuffle(a) {
		var j, x, i;
		for (i = a.length; i; i -= 1) {
			j = Math.floor(Math.random() * i);
			x = a[i - 1];
			a[i - 1] = a[j];
			a[j] = x;
		}
	}

	$(document).ready(function(){
		var colors = ["blue", "red", "green", "yellow", "orange", "pink", "brown", "black"];
		shuffle(colors);
		
		for(var i=0;i<colors.length;i++) {
			var td = $("#colors td").get(i);
			$(td).html(colors[i]);
		}
	});

</script>

<table border="5px" width="500px" height="50px" align="center">
	<tr id="colors">
		<td height="50px"></td>
		<td height="50px"></td>
		<td height="50px"></td>
		<td height="50px"></td>
		<td height="50px"></td>
		<td height="50px"></td>
		<td height="50px"></td>
		<td height="50px"></td>
	</tr>
</table>

shufflefunction 来自这个答案：https://stackoverflow.com/a/6274381/5119765

【讨论】：

【解决方案3】：

用以下代码替换您的脚本。 td 中的值是隐藏的，它们存储在本地数组 tableContents 中。

$(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]).attr("bgColor", colors.splice(Math.random() * (colors.length),1)) ;
        arr.push(colorCells[i].style.backgroundColor);
    }

    var tableContents=[];
    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")]);
      tableContents.push($(this).text());
      $(this).text('');
   })
 });

【讨论】：

【解决方案4】：

添加 - $(this).text('');在循环的最后，例如：

   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")]);
      $(this).text('');
   });

它将删除 td 文本；

【讨论】：