使用JavaScript创建表格或多维网格

我正在尝试创建一个单词搜索拼图，首先生成一个随机字母表。我希望有一个表，可以是任意数字，比如10X10，但到目前为止，我只能生成一个列，无法计算如何创建更多的列或整个网格

var firstCol = [];

for (var i = 0; i <= 10; i++){
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';
    var random = parseInt(Math.random()*characters.length);
    var letter = characters.charAt(random); //returning random letter
    var innerArrays = ['<td>' + letter + '</td>'];
    firstCol.push(innerArrays);
};


for (var i = 0; i <= 10; i++){
    document.getElementById('wsBox').innerHTML += 
    '<tr>'+ firstCol[i] + '</tr>';
};

var firstCol=[]；
对于（var i=0；i，以下是工作代码：


剧本

var rows = [];
var colStr = null;
for(var j = 0; j <= 10; j++) {
    colStr = "";
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';
  for (var i = 0; i <= 10; i++){
      var random = parseInt(Math.random()*characters.length);
      var letter = characters.charAt(random); //returning random letter
      var cell = '<td>' + letter + '</td>';
      colStr += cell;
  };
  rows.push('<tr>' + colStr + '</tr>');
}


document.getElementById('wsBox').innerHTML += rows.join("");

这是输出

这是一个非常基本的代码

var cols = 10; 
var rows = 10; 
var html = ""; 

for(var i =0; i <= rows; i++) { 
    html += '<tr>'; 
    for(var h=0; h<= cols; h++) { 
       var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ'; 
       var random = parseInt(Math.random()*characters.length);
       var letter = characters.charAt(random); //returning random letter
       html += '<td>' + letter + '</td>'; 
    } 
    html += '</tr>'; 
}

document.getElementById('wsBox').innerHTML += html;

var cols=10；
var行=10；
var html=“”；
对于（var i=0；i这使用数组来构建网格的单元格和行，这些单元格和行通过
join
方法连接在一起。只需将网格的维度传递给函数。仅一个循环

function createGrid(x, y) {
  var rows = [], cells = [];
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';

  // a complete grid is x * y dimensions
  for (var i = 0, l = x * y; i < l; i++) {
    letter = characters.charAt(Math.random() * characters.length);
    cells.push('<td>' + letter + '</td>');

    // when we reach the last column of the row
    // push the cells into the row array and reset
    // the cells array
    if (i !== 0 && (i + 1) % x === 0) {
      rows.push('<tr>' + cells.join('') + '</tr>');
      cells = [];
    }
  }
  return rows.join('');
}

-10x10网格

-3 x 4网格
@PauAI:本可以将其作为答案而不是注释来编写。@noob将其改写为答案+1，以便首先回答。根据我的说法，该算法应该具有更多的熵。在某些情况下，字符是连续重复的。不需要在每次循环迭代中重新定义
字符
。我们不知道ro的来源是什么ws代表单词拼图，所以它可能位于正确的位置，因为每次迭代都会有不同的数据。@PaulAl哇……我的代码太混乱了。你的代码简单而合理。非常感谢！请给出否决的原因，因为这段代码工作正常，完全符合规范。如果你想使用x*y提高效率，请查看@PauAl的答案，这是最有效和最容易理解的。如何使用2个循环比使用1个循环更有效？如果你不理解我的代码，那很好，但不要因为这个原因否决一个非常有用和准确的答案。你认真地计算循环的渐近算法复杂度吗？我的意思是，你的代码和他的代码具有相同的时间复杂度就代码的大小和易理解性而言，我的代码与Paul的代码具有相同的行数，并且我添加了注释来解释发生了什么。很抱歉，你不理解。OP希望能够改变网格的维度。你的代码不能解释这一点。她的问题是她代码不多，我只是把她的代码放在w为了避免混淆，ith在那里进行了更改。她的问题并没有说她代码不多。
var cols = 10; 
var rows = 10; 
var html = ""; 

for(var i =0; i <= rows; i++) { 
    html += '<tr>'; 
    for(var h=0; h<= cols; h++) { 
       var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ'; 
       var random = parseInt(Math.random()*characters.length);
       var letter = characters.charAt(random); //returning random letter
       html += '<td>' + letter + '</td>'; 
    } 
    html += '</tr>'; 
}

document.getElementById('wsBox').innerHTML += html;

function createGrid(x, y) {
  var rows = [], cells = [];
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';

  // a complete grid is x * y dimensions
  for (var i = 0, l = x * y; i < l; i++) {
    letter = characters.charAt(Math.random() * characters.length);
    cells.push('<td>' + letter + '</td>');

    // when we reach the last column of the row
    // push the cells into the row array and reset
    // the cells array
    if (i !== 0 && (i + 1) % x === 0) {
      rows.push('<tr>' + cells.join('') + '</tr>');
      cells = [];
    }
  }
  return rows.join('');
}

var tbody = document.getElementById('wsBox');
tbody.insertAdjacentHTML('beforeend', createGrid(10, 10));