Come posso creare una griglia 40x40 usando le div?

Question

Fondamentalmente sto provando a creare usando javascript una griglia rossa di div 40x40 nel mio documento html.

Ecco il mio ciclo:

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

Il problema è che non riesco a farlo a formare un quadrato di tutti i div che ho creato. Il contenitore è 1000 x 1000 px. Grazie

Answer 1

Credo che ciò che si vuole è la seguente:

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>

I tuoi div interni possono essere elementi di blocco in linea in modo che scorrano uno accanto all'altro (poiché i div sono di default a livello di blocco). È inoltre necessario inserire un'interruzione di riga dopo ogni ciclo interno (j). Quindi il processo sarebbe: generare 40 div in linea, inserire un'interruzione di riga, generare 40 div in linea, inserire un'interruzione di riga, ... (ripetere 38 volte in più).

Answer 2

L'aggiunta di un po 'di CSS e inline-block

Div s sono in genere bloccare elementi, è necessario renderli in linea block per aiutarvi con la vostra griglia.

Se si desidera rimuovere le lacune di linea, giocare con i margini (cioè margin: 0; per ridurre o margin: 0 1px; da aggiungere ai lati di ogni quadrato)

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

Tutto ciò che serve è quello di mettere l'ultima 3 linee all'interno del ciclo interno (non all'interno del ciclo esterno):

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

Inoltre, non dimenticate di impostare la 'visualizzazione' a 'inline-block':

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

Oppure, è necessario utilizzare l'attributo 'float':

div.style.float = "left"; 

EDIT:

Usa row-div al gruppo ogni 40 celle in una riga:

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

Prima di tutto, è necessario aggiungere il div creato su ogni iterazione del ciclo.

In secondo luogo, è necessario impostare le div come display: inline o 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

Ecco, questo in realtà crea 40 div in 40 div genitore (come righe):

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

Ecco questo lo farà per voi:

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

vedi esempio: http://jsfiddle.net/bun4g2d0/9/

Answer 7

È possibile utilizzare un mix di css, html e javascript.

IMHO, il modo migliore è sfruttare le classi CSS e invece di creare ogni elemento singolarmente in javascript, è possibile utilizzare cloneNode() per clonare la prima "casella".

Ecco un esempio (fiddle here) e seguente snippet

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>