使用Javascript创建div的动态网格
使用Javascript创建div的动态网格
提问于 2012-06-18 20:55:02
我想创建一个HTML div网格，它将具有相同的行数和列数，但行数/列数基于将传递给Javascript函数的特定数字。
例如，如果数字为3，则网格将为3行3列
如果数字为4，则网格将为4行4 columns..etc
在3的情况下，输出的代码需要如下所示：
<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的好方法，以便标识正确的元素来添加行div开始或结束标记(?)
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-06-18 21:17:49
沿着这些思路的东西应该对你有效。
<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>Stack Overflow用户
发布于 2012-06-18 21:02:33
var n=4;//take grid column value as you want
for(var i = 0; i < n; i++) {
document.body.innerHTML+='<div class="row">';
for(j = 0; j < n; j++) {
document.body.innerHTML+='<div class="gridsquare">' + (i*5+j+1) + '</div>';
}
document.body.innerHTML+='</div>';
}Stack Overflow用户
发布于 2012-06-18 21:02:37
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);我认为这将是识别row的好方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11083345
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号