Question

我正在开展一个项目，涉及创建我们自己版本的Conway＆＃34;生命游戏＆＃34;。我去了20x20网格的简单表示，就像许多嵌套的div一样 - 整个网格是一个div，每一行都是一个div，其中的每个单元格也都是div。

我的代码工作正常，但我想回想一下是否有一种更简单的方法来创建我的div使用html / javascript / jquery而不是强制复制粘贴它。如果它不是HTML，那么我自然会想到使用for循环的东西，我不太了解它。

有一种简单的方法吗？

Answer 1

您可以使用jquery创建元素。因此，如果您尝试创建div元素，则可以执行此操作，例如：

var grid = $('<div class="grid"></div>');
for (var i = 0; i < 20; i++) { 
 var row = $('<div class="row"></div>')  
 for (var j = 0; j < 20; k++) {
   var cell = $('<div class="cell"></div>');
   row.append(cell);
 }
 grid.append(row);
}

因此，如果您执行类似的操作，则可以使用JS

创建网格

Answer 2

使用for循环和innerHTML：

function makeTable(width, height) {
    var row, col, table = document.createElement('div'), html = '';
    for (row = 0; row < height; row += 1) {
        html += '<div class="row">';
        for (col = 0; col < width; col += 1) {
            html += '<div class="cell" id="c' + row + '_' + col + '"></div>';
        }
        html += '</div>';
    }
    table.className = 'game';
    table.innerHTML = html;
    return table;
}
document.getElementById('target').appendChild(makeTable(20, 20));

您还可以使用jQuery通过$('html_code_here')将您构建的HTML代码转换为DOM树，这与将其放置为DIV元素的innerHTML具有相同的效果;这只是用它来生成表元素。为您的寻址提供单个单元格，例如c_1_1，c_1_2，...，c_20_20。

生成几个类似div的方法？

2 个答案: