Hide the values of a td tag using jquery

Question

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")]);
});

Is color values are hard-coded now? say for `red` it is `2`? — Vinoth Krishnan, Apr 05 '16 at 09:45
@Preethi So you're filling this array from your `java variable` as we seen [here](http://stackoverflow.com/questions/36410905/assigining-jsp-variable-to-an-array-object-in-jquery/#36420644) — Vinoth Krishnan, Apr 05 '16 at 10:02
` I want all those values to be stored into an array in that shuffled order Html:` what do you mean by this? — Rajshekar Reddy, Apr 05 '16 at 10:19

score 0 · Answer 1 · edited May 23 '17 at 12:31

Here is the code for your need:

<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 is from this answer: https://stackoverflow.com/a/6274381/5119765

score 0 · Answer 2 · answered Apr 05 '16 at 09:59

Replace your script with the following code. The values inside td are hidden and those are stored in a local array 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('');
   })
 });

score 0 · Accepted Answer · answered Apr 05 '16 at 10:00

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.

If so, below is the code

$(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.

score -1 · Answer 4 · answered Apr 05 '16 at 09:53

Add - $(this).text(''); at the end inside loop, like:

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

It will remove td text;

Hide the values of a td tag using jquery

4 Answers4

Linked