gpt4 book ai didi

javascript - 创建一个 10x10 的单元格区域

转载 作者:太空宇宙 更新时间:2023-11-04 01:42:14 26 4
gpt4 key购买 nike

我想创建一个单元格字段。该字段的大小为 10x10。当达到一行中的最大单元格数时,它应该开始新的一行。

目前我所有的单元格 div 都放在下面。

function initGame() {

var mapSize = 10; // create a field of 10x10
var cellsPerRow = 10; // 10 cells per row

for (var x = 0; x < mapSize; x++) {
for (var y = 0; y < mapSize; y++) {
createCell(x, y); // create a cell on index x (horizontal) and y (vertical)
}
}
}

function createCell(x, y) {

// store this cell position to a data class

var cellDiv = $("<div></div>"); // create the cell div
cellDiv.addClass("cell"); // add some css
$(document.body).append(cellDiv); // add the cell div to the parent
}
.cell{
height: 50px;
width: 50px;
border-style: solid;
border-width: 1px;
border-color: black;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="initGame()">

</body>

最佳答案

为每 10 个单元格创建包装器。

function initGame() {

var mapSize = 10; // create a field of 10x10
var cellsPerRow = 10; // 10 cells per row

for (var x = 0; x < mapSize; x++) {

$(document.body).append("<div>");

for (var y = 0; y < mapSize; y++) {
createCell(x, y); // create a cell on index x (horizontal) and y (vertical)
}
$(document.body).append("</div>");

}
}

function createCell(x, y) {

// store this cell position to a data class

var cellDiv = $("<div></div>"); // create the cell div
cellDiv.addClass("cell"); // add some css
$(document.body).append(cellDiv); // add the cell div to the parent
}
.cell{
height: 50px;
width: 50px;
border-style: solid;
border-width: 1px;
border-color: black;
background: red;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="initGame()">

</body>

关于javascript - 创建一个 10x10 的单元格区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45208347/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com