在生成的表格中創建唯一的單元格

Question

桌子以前很清爽，現在不行了。 現在，檢查新的代碼片段，以及我試圖實現的主要目標（在最后一條評論中解釋），我相信這個新片段將有助於闡明我正在尋找的內容。 很抱歉給您帶來了很多麻煩，但非常感謝您的幫助：D

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

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

Answer 1

我不確定在其中一個單元格上“單擊”的意義是什么。 所以讓我們保持你的代碼原樣。 唯一的變化是關於如何將唯一表格單元格選擇/設置為唯一的最后幾行...

 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; getUnique(); } 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); /* keep your code as is for now and add the following lines */ var getUnique = function(){ var tdElements = document.querySelectorAll('#ff td'); tdElements[ RandomGenerator(0, tdElements.length) ].classList.add('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: fuchsia; }

 <div id='ff'></div>