title: Select a cell from the table and giving it unique class
body: <p>I have 49 cells (7x7 rows/cols), and I'm trying to create one cell out of the 49 cells to be unique, as you can see when you run the snippet, the 49 cells have random numbers between 50 to 500, and one of these cells have Red color.</p>
  
  <p>The problem I'm struggling with, I want that one cell to have Symbol (marking plate) like S or D for example instead of number, How i can achieve that? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var isCol = 0;
  var board = [];
  for (r = 0; r &lt; 7; r++) {
    var line = [];
    for (c = 0; c &lt; 7; c++) {
      line.push(RandomGenerator(50, 500));
    }
    board.push(line);
  }
  
  function prs(c, r) {
    showTable(c, r);
    isCol = (isCol + 1) % 2;
  }
  
  function toColor(col, row, chosen_col, chosen_row) {
    var ret = false;
    switch (isCol) {
      case 0:
        if (row == chosen_row) {
          ret = true;
        }
        break;
      case 1:
        if (col == chosen_col) {
          ret = true;
        }
        break;
    }
  
    return ret;
  }
  
  function showTable(chosen_col, chosen_row) {
    var str = "";
    str += "&lt;table border=1&gt;";
    for (row = 0; row &lt; 7; row++) {
      str += "&lt;tr&gt;";
      for (col = 0; col &lt; 7; col++) {
        str += "&lt;td onclick='prs(" + col + "," + row + ")'";
        if (toColor(col, row, chosen_col, chosen_row)) {
          str += " class='grn' ";
        }
        str += "&gt;";
        str += board[row][col];
        str += "&lt;/td&gt;";
      }
      str += "&lt;/tr&gt;";
    }
    str += "&lt;/table&gt;";
  
    document.getElementById("ff").innerHTML = str;
  }
  
  function RandomGenerator(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }
  
  showTable(-1);
  
  var getUnique = function(){
    var tdElements = document.querySelectorAll('#ff td');
    tdElements[
      RandomGenerator(0, tdElements.length)
    ].classList.add('uniqueCell')
  };
  getUnique();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td{
  border:2px solid black;
  width:10px;
  height:10px;
  }
  td:hover{background-color:lightgreen;}
  .grn{
  background-color:green;
  color:white;
  }
  
  .uniqueCell {
    background-color: tomato;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="ff"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>