Скрыть значения тега td с помощью jquery

Question

Вот моя скрипка https://jsfiddle.net/tuc1faug/1/ Здесь я назначил цвета с определенными значениями с помощью jquery. цвета будет перемешан каждый Time.now я хочу, чтобы эти значения должны быть скрыты в клетках, и я хочу, чтобы все эти значения должны быть сохранены в массив в этом перемешивается порядок 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")]); 
}); 

Answer 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.

Answer 2

Add - $ (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;

Answer 3

Вот код для вашей потребности:

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

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

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

 
</script> 
 

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

shuffle функция из этого ответа: https://stackoverflow.com/a/6274381/5119765

Answer 4

Заменить скрипт со следующим кодом. Значения внутри 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(''); 
    }) 
});