Jak utworzyć kratę 40x40 za pomocą elementów div?

Question

W zasadzie próbuję utworzyć za pomocą javascript 40x40 czerwoną siatkę elementów div w moim dokumencie HTML.

Oto moja pętla:

for(var i = 0; i < 40; i++) { 
     for(var j = 0; j< 40; j++) { 
      var div = document.createElement("div"); 
      div.style.width = "25px"; 
      div.style.height = "25px"; 
      div.style.background = "red"; 
     } 
     var jump = document.createElement("br"); 
     document.getElementById("container").appendChild(jump); 
     document.getElementById("container").appendChild(div); 
    } 

Problemem jest to, że nie wydaje się uzyskać go tworzą kwadrat wszystkich div stworzyłem. Kontener ma wymiary 1000 x 1000 pikseli. Dziękuję

Answer 1

wierzę, czego chcesz jest następujący:

for (var i = 0; i < 40; i++) { 
 
    for (var j = 0; j < 40; j++) { 
 
     var div = document.createElement("div"); 
 
     div.style.width = "25px"; 
 
     div.style.height = "25px"; 
 
     div.style.background = "red"; 
 
     document.getElementById("container").appendChild(div); 
 
    } 
 
    var jump = document.createElement("br"); 
 
    document.getElementById("container").appendChild(jump); 
 
}

#container { 
 
    width:1000px; 
 
    height:1000px; 
 
} 
 
#container div { 
 
    display:inline-block; 
 
    vertical-align:top; 
 
}

<div id="container"></div>

Twoje wewnętrzne elementy div mogą być elementami bloków śródliniowych, więc przepływają obok siebie (domyślnie div są blokowe). Musisz również wstawić podział linii po każdej wewnętrznej pętli (j). Tak więc proces będzie: wygenerować 40 wbudowanych elementów div, wstawić linię podziału, wygenerować 40 wbudowanych elementów div, wstawić linię podziału, ... (powtórz jeszcze 38 razy).

Answer 2

Dodawanie trochę CSS i inline-block

Div s zazwyczaj zablokować elementy, trzeba je zrobić inline-bloki, aby pomóc Państwu w siatce.

Jeśli chcesz usunąć luki linia, grać z marginesami (tj margin: 0; celu zmniejszenia lub margin: 0 1px; dodać do boków każdego kwadratu)

for (var i = 0; i < 40; i++) { 
 
    var jump = document.createElement("br"); 
 

 
    for (var j = 0; j < 40; j++) { 
 
    var div = document.createElement("div"); 
 
    div.style.width = "25px"; 
 
    div.style.height = "25px"; 
 
    div.style.background = "red"; 
 
    document.getElementById("container").appendChild(div); 
 
    } 
 

 
    document.getElementById("container").appendChild(jump); 
 
}

#container div { 
 
    /* you need this */ 
 
    display: inline-block; 
 

 
} 
 

 
#container { 
 
    width: 1000px; 
 
    height: 1000px; 
 
}

<div id="container"> 
 

 
</div>

Answer 3

Wystarczy umieścić ostatni 3 linie wewnątrz pętli wewnętrznej (nie wewnątrz zewnętrznej pętli):

for(var i = 0; i < 40; i++) { 
    for(var j = 0; j< 40; j++) { 
     var div = document.createElement("div"); 
     div.style.width = "25px"; 
     div.style.height = "25px"; 
     div.style.background = "red"; 

     var jump = document.createElement("br"); 
     document.getElementById("container").appendChild(jump); 
     document.getElementById("container").appendChild(div); 
    } 
} 

Ponadto, nie zapomina ustawić „display” na „inline bloku”

div.style.display = "inline-block"; 

Albo trzeba użyć 'pływaka' atrybut:

div.style.float = "left"; 

EDIT:

Zastosowanie wiersz div do grupy każda 40 komórki w wierszu:

for(var i = 0; i < 40; i++) { 
    var row = document.createElement("div"); 
    for(var j = 0; j< 40; j++) { 
     var cell = document.createElement("div"); 
     cell.style.width = "25px"; 
     cell.style.height = "25px"; 
     cell.style.background = "red"; 
     cell.style.display = "inline-block" 

     row.appendChild(cell); 
    } 
    document.getElementById("container").appendChild(row); 
} 

Answer 4

Przede wszystkim musisz dołączyć utworzony div do każdej iteracji pętli.

Po drugie, trzeba ustawić DIV jako display: inline lub display: inline-block

for(var i = 0; i < 40; i++) { 
 
     for(var j = 0; j< 40; j++) { 
 
      var div = document.createElement("div"); 
 
      div.style.width = "25px"; 
 
      div.style.height = "25px"; 
 
      div.style.background = "red"; 
 
      document.getElementById("container").appendChild(div); 
 
     } 
 
    }

#container { 
 
    width: 1000px; 
 
    height: 1000px; 
 
} 
 

 
#container > div { 
 
    display: inline-block; 
 
}

<div id="container"></div>

Answer 5

Tutaj, to faktycznie tworzy 40 DIV w 40 DIV macierzystego (np wierszy):

for(var i = 0; i < 40; i++) { 
    var div1 = document.createElement('div') 
    for(var j = 0; j< 40; j++) { 
     var div = document.createElement("div"); 
     div.style.width = "25px"; 
     div.style.height = "25px"; 
     div.style.background = "red"; 
     div.style.display = 'inline-block'; 
     div.style.margin = '1px' 
     div1.appendChild(div) 
    } 
    document.getElementById('container').appendChild(div1); 
} 

http://plnkr.co/edit/1jVBeYIMaGfzzgqt7yUj?p=info

Answer 6

Tutaj to zrobi to za ciebie:

<body onload="makeGrid()" id="container"> 
<body> 
<script> 
    function makeGrid(){ 
    for(var i = 0; i < 40; i++) {   
     for(var j = 0; j< 40; j++) { 

      var div = document.createElement("div"); 
      div.style.width = "25px"; 
      div.style.height = "25px"; 
      div.style.background = "red"; 
      document.getElementById("container").appendChild(div); 
     } 

     //document.getElementById("container").appendChild(jump); 
     //document.getElementById("container").appendChild(div); 
    } 
    } 
</script> 

CSS

#container{width: 1000px; height: 1000px;} 
div{float: left;} 

Zobacz przykład: http://jsfiddle.net/bun4g2d0/9/

Answer 7

Możesz użyć kombinacji css, html i javascript.

IMHO, najlepszym sposobem jest skorzystanie z klas CSS i zamiast tworzyć każdy element indywidualnie w javascript, możesz użyć cloneNode() do sklonowania pierwszego "pudełka".

Oto przykład (fiddle here) i snippet poniżej

var parent = document.getElementById('parent'), 
 
    box = parent.children[0]; 
 

 
for (var i = 0; i < 100; ++i) { 
 
    var nBox = box.cloneNode(true); 
 
    parent.appendChild(nBox); 
 
}

.grid { 
 
    width: 1000px; 
 
    height: 1000px; 
 
    background-color: green; 
 
} 
 
.box { 
 
    float: left; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: red; 
 
    border: 1px solid white; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
}

<div id="parent" class="grid"> 
 
    <div class="box">&nbsp;</div> 
 
</div>