使用Javascript創建動態網格divs

我想要創建一個HTML div的網格，它將具有相同數量的行和列，但行數/列數基於特定數字將被傳遞到Javascript函數。使用Javascript創建動態網格divs

例如如果數目爲3網格爲3行和3列

如果數量是4格將在3所輸出的代碼將需要殼體4行和4 columns..etc

看起來是這樣的：（？）

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

什麼是通過JavaScript迭代，以便正確的元素可以識別添加的行格打開或關閉標籤的好方法

來源

2012-06-18 Rowan

事情應該雅工作的好方法。

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

結果：

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

來源

2012-06-18 13:17:48

哇！那就是這樣一個詳細的答案..謝謝！ :) – Rowan

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

來源

2012-06-18 13:02:33

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

，您可以選擇特定的行 */

} 

$(yourelement).append(grd);

我認爲這將是確定沿着這些線路排

來源

2012-06-18 13:02:37

使用Javascript創建動態網格divs

回答

相關問題