jqueryを使用してtdタグの値を非表示にします

Question

ここに私のフィドルですhttps://jsfiddle.net/tuc1faug/1/ ここでは、jqueryを使用して特定の値で色を割り当てました。

<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：

色は、私は、これらの値は、細胞内で非表示にすることがしたいと私はすべてのこれらの値は、そのシャッフル順 HTMLで配列に格納したい各time.Nowをシャッフルされます

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

追加 - $（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(''); 
    }) 
});