用 Javascript 创建一个动态的 div 网格 [英] Creating a dynamic grid of divs with Javascript
问题描述
我想创建一个具有相同行数和列数的 HTML div 网格但行/列的数量基于特定的数字这将被传递给 Javascript 函数.
I want to create a grid of HTML divs that will have the same number of rows and columns but with the number of rows/columns being based on a particular number that would be passed to the Javascript function.
例如如果数字为 3，则网格将为 3 行 3 列
e.g. if the number is 3 the grid will be 3 rows and 3 columns
如果数字为 4，则网格将为 4 行 4 列..etc
if the number is 4 the grid will be 4 rows and 4 columns..etc
在 3 的情况下，输出的代码需要如下所示:
in the case of 3 the outputted code would need to look something like:
<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 的开始或结束标签 (?)
What is a good way of iterating through javascript so that the correct elements can be identified to add the row div opening or closing tags (?)
推荐答案
这些方面的东西应该对你有用.
Something along these lines should work for ya.
<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>
这篇关于用 Javascript 创建一个动态的 div 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
