使用 JavaScript 将 5 个关键字随机插入到 HTML 表的一部分中

Question

我对 JavaScript 相当陌生。我有一个 8 x 8 HTML 表作为在 JS 文件中动态创建的游戏的板，如下所示：

function drawBoard(rows, cols){
var grid = document.getElementById("grid");
grid.className = 'grid';
for (var r = 0; r < rows; r++){
var row = grid.appendChild(document.createElement('tr'));
for (var c = 0; c < cols; c++){
var cell = row.appendChild(document.createElement('td'));
}    
}
return grid;
}
document.body.appendChild(drawBoard(ROW, COL));

当我加载页面时，板显示成功。我需要在 5 个单元格上随机插入 5 个关键字。这些单元格不能沿着正方形的外边框(即，不能位于第一行或最后一行或最后一列(。我在我的 javascript 文件中将 5 个关键字作为数组。如何在表格上随机选择 5 个单元格，不包括第一行或最后一行或列，并在每次绘制板子时在它们上插入这些关键字？我尝试了cell.innerHTML ="关键字"，但最终只在表上的每个单元格上插入了一个关键字。在网上进行了彻底的搜索，没有任何运气。谢谢！

Answer 1

// I'm assuming ROW, COL and keywords are declared somewhere in your code
const ROW = 8;
const COL = 8;
const keywords = ['a', 'b', 'c', 'd', 'e'];
// --- your code, no changes
function drawBoard(rows, cols, keywords) {
var grid = document.getElementById("grid");
grid.className = 'grid';
for (var r = 0; r < rows; r++) {
var row = grid.appendChild(document.createElement('tr'));
for (var c = 0; c < cols; c++) {
row.appendChild(document.createElement('td'));
}
}
return grid;
}
// save the table in a variable
const grd = document.body.appendChild(drawBoard(ROW, COL));
//--- NEW CODE STARTS HERE
const shuffle = array => {
const shuffled = [];
while (array.length) {
const index = Math.floor(Math.random() * array.length);
shuffled.push(array.splice(index, 1).pop());
}
return shuffled;
};
const filtered = Array.from(grd.querySelectorAll('td'))
.filter(({cellIndex, parentElement: {rowIndex}}) => rowIndex && rowIndex < ROW - 1 && cellIndex && cellIndex < COL - 1);
const shuffled = shuffle(filtered);
const sliced = filtered.slice(0, keywords.length);
sliced.forEach((cell, index) => cell.innerHTML = keywords[index]);

<table id="grid"></table>

filtered所有单元格都不在边框上

shuffled数组只是使用随机函数洗牌的所有过滤单元格

sliced数组是随机数组中的第一个n单元格，其中n是关键字的数量

那么添加关键字很简单

---

要解释过滤器功能：

({cellIndex, parentElement: {rowIndex}}) => 
rowIndex && rowIndex < ROW - 1 && cellIndex && cellIndex < COL - 1;

这是 ES6 的执行方式

function(cell) {
var cellIndex = cell.cellIndex;
var parentElement = cell.parentElement;
var rowIndex = parentElement.rowIndex;
return rowIndex && rowIndex < ROW - 1 && cellIndex && cellIndex < COL - 1;
}

Answer 2

首先，在 64 - 28 个可用单元格中提取 5 个随机单元格。然后我们有一个 6x6 的正方形可用。

//We keep an array to store cells for keywords
var keyCells = [];
//A function to check if we already choosed a cell
function checkChoosed( x, y ) {
if( keyCells.length > 0 ) {
for( var j = 0; j < keyCells.length; j++ ) {
if( ( keyCells[ j ].x == x ) && ( keyCells[ j ].y == y ) ) return 1;
}
}
return 0;
}
//Pick random coordinates (in 6x6 square) for cells
function randomCells() {
var choosed = 0;
while( choosed < 5 ) {
var x = Math.round( Math.random() * 5 ) + 1; //Math.random returns a number between 0 and 0.99, so * 5 to get from 0 to 4.95, + 1 because we skip first row and column of the grid
var y = Math.round( Math.random() * 5 ) + 1;
if( !checkChoosed( x, y ) ) {
keyCells.push( { x: x, y: y } );
choosed++;
}
}
}
//Now we draw the table and access it for keywords
function drawBoard(rows, cols) {
var grid = document.getElementById("grid");
grid.className = 'grid';
for ( var r = 0; r < rows; r++ ) {
var row = grid.appendChild(document.createElement('tr'));
for ( var c = 0; c < cols; c++ ) {
var cell = row.appendChild(document.createElement('td'));
}    
}
randomCells();
var trs = document.getElementById('grid').children;
for( var i = 0; i < keyCells.length; i++ ) {
var currX = keyCells[ i ].x;
var currY = keyCells[ i ].y;
//Here I used the ":nth-child" CSS selector to access "tr" (our Y) and then "td" (our X)
var currRow = trs[ currY ].children;
currRow[ currX ].innerHTML = /* your keyword here */
}
return grid;
}