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

回答

相关问题