Erstellen einer dynamischen raster von divs mit Javascript

Ich soll ein Gitter mit HTML-divs, die die gleiche Anzahl von Zeilen und Spalten
aber mit der Anzahl der Zeilen/Spalten wird basierend auf einer bestimmten Anzahl
das wäre der an die Javascript-Funktion.

z.B. wenn die Zahl 3 das grid mit 3 Zeilen und 3 Spalten

wenn die Zahl 4 das raster 4 Zeilen und 4 Spalten..usw

im Fall 3 der ausgegeben code müsste so Aussehen:

<div class="row">
  <div class="gridsquare">1</div>
  <div class="gridsquare">2</div>
  <div class="gridsquare">3</div>
</div>
<div class="row">
  <div class="gridsquare">4</div>
  <div class="gridsquare">5</div>
  <div class="gridsquare">6</div>
</div>
<div class="row">
  <div class="gridsquare">7</div>
  <div class="gridsquare">8</div>
  <div class="gridsquare">9</div>
</div>

Was ist eine gute Art des Durchlaufens von javascript, so dass die richtigen Elemente
identifiziert werden können, fügen Sie die Zeile div öffnende oder schließende tags (?)

InformationsquelleAutor Rowan | 2012-06-18

Etwas entlang dieser Linien sollte die Arbeit für dich.

<html><head> 
  <script language="javascript"> 
    function genDivs(v){ 
      var e = document.body; //whatever you want to append the rows to: 
      for(var i = 0; i < v; i++){ 
        var row = document.createElement("div"); 
        row.className = "row"; 
        for(var x = 1; x <= v; x++){ 
            var cell = document.createElement("div"); 
            cell.className = "gridsquare"; 
            cell.innerText = (i * v) + x;
            row.appendChild(cell); 
        } 
        e.appendChild(row); 
      } 
      document.getElementById("code").innerText = e.innerHTML;

    }
  </script> 
</head> 
<body> 
    <input type="button" onclick="genDivs(6)" value="click me"> 
    <code id="code"></code>
</body> 
</html>

Ergebnisse:

  <div class="row">
    <div class="gridsquare">
      1
    </div>

    <div class="gridsquare">
      2
    </div>

    <div class="gridsquare">
      3
    </div>

    <div class="gridsquare">
      4
    </div>

    <div class="gridsquare">
      5
    </div>

    <div class="gridsquare">
      6
    </div>
  </div>

  <div class="row">
    <div class="gridsquare">
      7
    </div>

    <div class="gridsquare">
      8
    </div>

    <div class="gridsquare">
      9
    </div>

    <div class="gridsquare">
      10
    </div>

    <div class="gridsquare">
      11
    </div>

    <div class="gridsquare">
      12
    </div>
  </div>

  <div class="row">
    <div class="gridsquare">
      13
    </div>

    <div class="gridsquare">
      14
    </div>

    <div class="gridsquare">
      15
    </div>

    <div class="gridsquare">
      16
    </div>

    <div class="gridsquare">
      17
    </div>

    <div class="gridsquare">
      18
    </div>
  </div>

  <div class="row">
    <div class="gridsquare">
      19
    </div>

    <div class="gridsquare">
      20
    </div>

    <div class="gridsquare">
      21
    </div>

    <div class="gridsquare">
      22
    </div>

    <div class="gridsquare">
      23
    </div>

    <div class="gridsquare">
      24
    </div>
  </div>

  <div class="row">
    <div class="gridsquare">
      25
    </div>

    <div class="gridsquare">
      26
    </div>

    <div class="gridsquare">
      27
    </div>

    <div class="gridsquare">
      28
    </div>

    <div class="gridsquare">
      29
    </div>

    <div class="gridsquare">
      30
    </div>
  </div>

  <div class="row">
    <div class="gridsquare">
      31
    </div>

    <div class="gridsquare">
      32
    </div>

    <div class="gridsquare">
      33
    </div>

    <div class="gridsquare">
      34
    </div>

    <div class="gridsquare">
      35
    </div>

    <div class="gridsquare">
      36
    </div>
  </div>

Wow!!! Das ist so eine ausführliche Antwort..danke! 🙂

InformationsquelleAutor Chris Gessler

var n=4;//take grid column value as you want
var j=1;

for(var i = 1; i < n; i++) {
    document.body.innerHTML+='<div class="row">';

    for(k = 0; k < n; k++) {
        document.body.innerHTML+='<div class="gridsquare">' + (j++) + '</div>';
    }

    document.body.innerHTML+='</div>';
}

InformationsquelleAutor

var grd="";
var rowCount=3;
for(var i=0; i<rowCount; i++){
/*here make whole string with row id to make identification of row then

können Sie bestimmte Zeile
*/

}

$(yourelement).append(grd);

Ich denke, es wird ein guter Weg, um zu identifizieren, Zeile

InformationsquelleAutor RAKESH HOLKAR

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.