使用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/

脚本

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("");

用一些CSS把它洗掉

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

这是输出

​

​

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添加已编译的grid。

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

演示 - 10×10网格

演示 -3x4网格