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

Question

我正在尝试创建一个单词搜索拼图，我开始生成一个随机字母表。我希望有一个数字表的任意数字，例如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>';
};

这是我的HTML ...

<table>
    <tbody id="wsBox">
    </tbody>
</table>

Answer 1

这是一个非常基本的代码。

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;

Answer 2

此处的工作代码：

http://jsfiddle.net/42dj7jy8/3/

脚本

td {
  border: 1px solid black;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

使用

清除一些CSS

{{1}}

此处的输出

Answer 3

这使用数组来构建使用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('');
}

抓取元素并使用insertAdjacentHTML添加已编译的网格HTML。

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

DEMO - 10 x 10格

DEMO - 3 x 4网格