Question

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

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

＆＃13;

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
}

＆＃13;

.cell{
    height: 50px;
    width: 50px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="initGame()">

</body>

＆＃13;

Answer 1

将display:inline-block;用于.cells并停止10行，每行添加10个div后的<br>标记。

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);

    }
    $(document.body).append("<br>");
  }
}

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>

Answer 2

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

＆＃13;

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
}

＆＃13;

.cell{
    height: 50px;
    width: 50px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background: red;
display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="initGame()">

</body>

＆＃13;

Answer 3

您可以使用绝对定位并为每个css属性设置。这是小提琴

＆＃13;

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
  cellDiv.css({
    left: Math.floor(x*50),
    top: Math.floor(y*50)
  });
  $(document.body).append(cellDiv); // add the cell div to the parent
}

initGame()

＆＃13;

.cell{
    height: 50px;
    width: 50px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background: red;
    position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

＆＃13;

Answer 4

您可以创建包含多个单元格div

的行div

＆＃13;

function initGame() {
  const rows = 10;
  const columns = 10;

  for(let r=0;r<rows;r++){
    let row = createRow(r);
    for(let c=0;c<columns;c++){
      createCell(row, r, c);
    }
  }
}

function createRow(rowNumber){
  let row = document.createElement('DIV');
  row.className += ' row'
  $(document.body).append(row);
  return row;
}

function createCell(domRow, rowNumber, columnNumber){
  let column = document.createElement('DIV');
  column.className += ' cell';
  $(domRow).append(column);
}

＆＃13;

.cell{
    height: 50px;
    width: 50px;
    border: 1px solid grey;
    background: tomato;
    display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="initGame()">

</body>

＆＃13;

创建一个10x10的单元格字段

4 个答案: