10x10フィールドのセルを作成する

セルのフィールドを作成したい。フィールドのサイズは10x10です。行内のセルの最大数に達すると、新しい行が開始されます。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>

出典

2017-07-20 peterHasemann

を含む行divを作成することができます申し訳ありませんが、あなたの質問は何ですか？あなたが望むものと現在のコードとの違いを説明してください。 – Richard

セルは右側の列を埋める必要があります。 1行に10個のセルが必要です – peterHasemann

なぜテーブルを作成しないのですか？（そして、各行が 'display：table/table-row/table-cel;'で別々の要素にあればCSSでやります） – Richard

は各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>

出典

2017-07-20 07:47:43

.cellsに使用display:inline-block; 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>

出典

2017-07-20 07:40:19

あなたの行の1行あたりのセル数は利用可能な幅によって決まります。 OPは明らかに10x10のフィールドを必要とします。 –

サイモンは正しいですが、これを解決するために必要なことは、cellWidth * 10 –

の「幅」のコンテナにセルを配置することです。今すぐ私の解決策をチェックしてください。 –

あなたはプロパティCSSそれらのそれぞれの絶対位置と設定を使用することができます。ここではフィドル

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

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

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

出典

2017-07-20 07:46:51

あなたは、複数のセルdiv

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); 
 
}

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

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

 
</body>

出典

2017-07-20 07:49:58 Weedoze

10x10フィールドのセルを作成する

答えて

関連する問題