Erstellen Sie ein 10x10 Feld von Zellen

Ich möchte ein Feld von Zellen erstellen. Das Feld hat eine Größe von 10x10. Wenn eine maximale Anzahl von Zellen in einer Zeile erreicht wird, sollte eine neue Zeile beginnen.Erstellen Sie ein 10x10 Feld von Zellen

Momentan sind alle meine Zellen divs unterhalb platziert.

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>

Quelle

2017-07-20 peterHasemann

Sorry, was ist Ihre Frage? Bitte beschreiben Sie, was Sie wollen und wie der aktuelle Code davon abweicht. – Richard

Die Zellen sollten die Spalten auf der rechten Seite füllen. Es sollte 10 Zellen pro Zeile geben – peterHasemann

Warum nicht einfach eine Tabelle erstellen? (Und machbar in CSS, wenn jede Zeile in einem separaten Element mit 'display: table/table-row/table-cel;'.) Liegt – Richard

erstellen Wrapper für jede Zelle 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>

Quelle

2017-07-20 07:47:43

Verwendung display:inline-block; für .Cells und 10 jede Zeile hinzufügen <br> Tag nach 10 divs in Reihe zu stoppen.

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>

Quelle

2017-07-20 07:40:19

Die Anzahl der Zellen pro Zeile in Ihrer Lösung hängt von der verfügbaren Breite ab. OP will eindeutig ein 10x10 Feld von Zellen. –

Simon ist richtig, aber alles, was Sie tun müssen, um dies zu beheben, ist, die Zellen in einen Container mit 'width' von cellWidth zu setzen * 10 –

ich habe es. Überprüfe jetzt meine Lösung. –

können Sie die absolute Positionierung verwenden und für jeden von ihnen CSS-Eigenschaft. Hier ist die Geige

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>

Quelle

2017-07-20 07:46:51

Sie eine Zeile erstellen div die div mehrere Zelle enthält

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>

Quelle

2017-07-20 07:49:58 Weedoze

Erstellen Sie ein 10x10 Feld von Zellen

Antwort

Verwandte Themen