Question

运行代码片段以更好地了解我要说的内容如您所见，我有49个单元格具有随机数字，每次单击这些单元格时，数字都会更改并刷新，我希望这些单元格中的数字永远不会改变，除非我刷新页面或专门设置按钮它，否则他们不应该刷新是我的目标

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

function myFunction() {
  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(r);
	}
	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+=RandomGenerator(50, 500);
		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);

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

<div id='ff'></div>
<td id = "uniqueCell">  </td>

Answer 1

由于您已经有了board矩阵，因此可以用随机数填充它，完成后就可以渲染表格。

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

function myFunction() {
  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);
}

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

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 a table.

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

如何阻止表格刷新

1 个答案: