How I Can Stop The Table From Refreshing

run the code snippet to have better understanding of what im trying to say I have 49 cells that have randomized numbers as you can see, and every time i click on on of these cells,

Solution 1:

Since you already have the board matrix, you can fill it with random numbers and once that is done you can render the table.

var uniqueCell = document.getElementById("uniqueCell");

functionmyFunction() {
  document.querySelector("uniqueCell").style.backgroundColor = "red";
}

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

functionprs(c, r) {
  showTable(c, r);
  isCol = (isCol + 1) % 2;
}

functiontoColor(col, row, chosen_col, chosen_row) {
  var ret = false;
  switch (isCol) {
    case0:
      if (row == chosen_row) {
        ret = true;
      }
      break;
    case1:
      if (col == chosen_col) {
        ret = true;
      }
      break;
  }

  return ret;
}

functionshowTable(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;
}

functionRandomGenerator(min, max) {
  returnMath.floor(Math.random() * (max - min) + min);
}

showTable(-1);

td {
  border: 2px solid black;
  width: 10px;
  height: 10px;
}
td:hover {
  background-color: lightgreen;
}
.grn {
  background-color: green;
  color: white;
}
Since you already have the `board` matrix, you can fill it with random numbers and once that is done you can render atable.

<divid="ff"></div><tdid="uniqueCell"></td>