Как я могу заставить уникальную Ячейку оставаться и не исчезать, когда я щелкаю по любой ячейке в моей таблице?

Question

Основная цель - дать игроку А выбрать вертикальный, а игрок Б - горизонтальный.

Пожалуйста, запустите код фрагмента, чтобы лучше понять мой вопрос !, спасибо большое

У меня есть уникальная ячейка с символом S и красным цветом, однако, если я щелкаю по любой ячейке, она исчезает и ее заменяют обычные числа. Как я могу заставить уникальную Ячейку оставаться и не исчезать, когда я щелкаю по любой ячейке в моем столе?

var isCol = 0;
var board = [];
for (r = 0; r < 7; r++) {
  var line = [];
  for (c = 0; c < 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 += "<table border=1>";
  for (row = 0; row < 7; row++) {
    str += "<tr>";
    for (col = 0; col < 7; col++) {
      str += "<td onclick='prs(" + col + "," + row + ")'";
      if (toColor(col, row, chosen_col, chosen_row)) {
        str += " class='grn' ";
      }
      str += ">";
      str += board[row][col];
      str += "</td>";
    }
    str += "</tr>";
  }
  str += "</table>";

  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');
  // update the text of the cell using the class
  document.querySelector('.uniqueCell').textContent = 'S';
};
getUnique();

td{
  border:2px solid black;
  width:10px;
  height:10px;
}
td:hover{background-color:lightgreen;}
.grn{
  background-color:green;
  color:white;
}

.uniqueCell {
  background-color: tomato;
  text-align: center;
}

<div id="ff"></div>

Answer 1

добавлено

document.querySelectorAll("#ff td")[uniqueCell].innerHTML='S';

document.querySelectorAll("#ff td")[uniqueCell].className ='uniqueCell';

uniqueCell - случайное число td

var isCol = 0;
var board = [];
for (r = 0; r < 7; r++) {
  var line = [];
  for (c = 0; c < 7; c++) {
    line.push(RandomGenerator(50, 500));
  }
  board.push(line);
}

function prs(c, r) {
  showTable(c, r);
  isCol = (isCol + 1) % 2;
  document.querySelectorAll("#ff td")[uniqueCell].innerHTML='S';
  document.querySelectorAll("#ff td")[uniqueCell].className ='uniqueCell';
  
}

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 += "<table border=1>";
  for (row = 0; row < 7; row++) {
    str += "<tr>";
    for (col = 0; col < 7; col++) {
      
      str += "<td onclick='prs(" + col + "," + row + ")'";
      if (toColor(col, row, chosen_col, chosen_row)) {
        str += " class='grn' ";
      }
      str += ">";
      str += board[row][col];
      str += "</td>";
    }
    str += "</tr>";
  }
  str += "</table>";

  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');
  uniqueCell=RandomGenerator(0, tdElements.length);
  tdElements[
    uniqueCell
  ].classList.add('uniqueCell');
  // update the text of the cell using the class
  document.querySelector('.uniqueCell').textContent = 'S';
};
var uniqueCell;
getUnique();

td{
  border:2px solid black;
  width:10px;
  height:10px;
}
td:hover{background-color:lightgreen;}
.grn{
  background-color:green;
  color:white;
}

.uniqueCell {
  background-color: tomato;
  text-align: center;
}

<div id="ff"></div>

Answer 2

Функция showTable(...) генерирует таблицу каждый раз и заменяет innerHtml на новую. getUnique помечает ячейку только в начале.

Возможное решение: сохранить var randomCell = RandomGenerator(...) до showTable(-1) и установить класс uniqueCell в showTable(...)