從表格中選擇一個單元格並為其指定唯一的類

Question

我有 49 個單元格（7x7 行/列），我正在嘗試從 49 個單元格中創建一個唯一的單元格，正如您在運行代碼段時所看到的，這 49 個單元格具有 50 到 500 之間的隨機數，並且這些細胞之一具有紅色。

我正在努力解決的問題是，我希望一個單元格具有符號（標記板），例如 S 或 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); 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: tomato; }

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

Answer 1

這看起來很簡單，因為您在元素中有一個類 ( uniqueCell )。 您可以簡單地使用類 ( uniqueCell ) 定位單元格並設置innerText或textContent屬性：

document.querySelector('.uniqueCell').textContent = '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(curr, c, r) { showTable(curr, 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(c, chosen_col, chosen_row) { var str = ""; str += "<table border=1>"; for (row = 0; row < 7; row++) { str += "<tr>"; for (let col = 0; col < 7; col++) { str += "<td onclick='prs(this, " + col + "," + row + ")'"; if (toColor(col, row, chosen_col, chosen_row)) { if(c.textContent == board[row][col]){ str += " class=uniqueCell"; } else str += " class='grn' "; } str += ">"; if(c.textContent == board[row][col]){ str += 'S'; } else 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; text-align: center; } td:hover{background-color:lightgreen;} .grn{ background-color:green; color:white; } .uniqueCell { background-color: tomato; }

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