用Javascript创建一个动态网格
Creating a dynamic grid with Javascript
我对JS非常陌生,所以请原谅任何可能完全,完全错误的东西。
我试图动态创建一个16x16的div网格。我的逻辑是,我将为所有网格创建一个容器,在容器内,我将添加16行,在每行中,我将添加16个框。我对我的代码有一个粗略的想法,我想检查它是否有效的逻辑和JS。
/* Creating the grid */
function grid() {
var container = document.createElement("div");
container.id = "main";
container.className = "container";
for (i=0, i<16, i+=1) {
var row = document.getElementbyId('main').appendChild('div');
row.className = "row";
row.id = "row" + i;
};
for (j=0, j<16, j+=1) {
for (k=0, k<16, k+=1) {
var box = document.getElementbyId("row" + j).appendChild('div');
box.className = "box";
};
};
};
代码有一些问题。
-
for
loop语法为for(init;condition;final-expression)
,for
参见手册。 -
appendChild
需要节点而不是字符串 - 函数
grid()
不做任何事情。它应该返回一个节点,接受一个节点以追加或在某处插入内容,这由您决定。
请参阅下面的演示,以获取更正后的代码和演示。
/* Creating the grid */
function grid(el) {
var container = document.createElement("div");
container.id = "main";
container.className = "container";
for (i=0; i<16; i+=1) {
var row = document.createElement("div");
row.className = "row";
row.id = "row" + i;
for (k=0; k<16; k+=1) {
var box = document.createElement("div");
box.className = "box";
row.appendChild(box);
};
container.appendChild(row);
};
el.appendChild(container);
};
grid(document.body);
.row {
border:1px solid green;
height:1em;
line-height:1em;
}
.box {
display:inline-block;
width:6.25%;
height:1em;
box-sizing:border-box;
border:1px solid red;
}
您应该注意在for循环中语法的误用。
你可能需要这个:
'use strict';
function grid() {
var container = document.createElement('div');
container.id = "main";
container.className = "container";
for (var i = 0; i < 16; i++) {
var row = document.createElement('div');
row.className = "row";
row.id = "row" + i;
for (var j = 0; j < 16; j++) {
var box = document.createElement('div');
box.className = 'box';
row.appendChild(box);
}
container.appendChild(row);
}
return container;
}
console.log(grid());
// and you should use
// document.getElementById('xxx').appendChild(grid());
你可以参考:
- . getelementbyid ()
- Node.appendChild ()
- Document.createElement () Nicholas C. Zakas—加速JavaScript,第4部分,其中告诉您可以将所有子节点附加到父节点,然后将父节点附加到其父节点。
你有很多语法错误需要注意,比如:
for循环,它应该包含分号而不是逗号…
您需要在每次添加它之前创建div,就像您为容器所做的那样。
这是一个工作代码:
function grid(){
var container = document.createElement("div");
container.id = "main";
container.className = "container";
document.body.appendChild(container);
var main = document.getElementById('main');
for (var i=0; i<16; i++) {
var row = document.createElement("div");
row.className = "row";
row.id = "row" + i;
main.appendChild(row);
var roww = document.getElementById('row'+i);
for (var j=0; j<16; j++) {
var box = document.createElement("div");
box.className = "box";
roww.appendChild(box);
}
}
}
window.onload = grid();
Here's A fiddle
/* Creating the grid */
function grid (content) {
var container = content.appendChild(document.createElement("div"));
container.id = "main";
container.className = "container";
for (var i = 0;i < 16;++i) {
var row = container.appendChild(document.createElement("div"));
row.className = "row";
row.id = "row" + i;
for (var k = 0;k < 16;++k) {
var box = row.appendChild(document.createElement("div"));
box.className = "box";
}
}
}
grid(document.body)
你的代码中的一些错误:
-
container
也需要插入到某个地方。 -
appendChild
接受节点,不接受字符串 -
for loop
使用;
来分隔表达式,而不是,
(它们都是可选的)
是的,逻辑是正确的,尽管有一些语法/类型错误,它将更有效地存储可重用的变量,只有2个循环如下
function grid(d) {
var container = d.createElement("div");
container.id = "main";
container.className = "container";
for (i=0; i<16; i++) {
var row = container.appendChild(d.createElement('div'));
row.className = "row";
row.id = "row" + i;
for (k=0; k<16; k++) {
var box = row.appendChild(d.createElement('div'));
box.className = "box";
};
};
d.body.appendChild(container);
};
grid(document);
相关文章:
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- 如何在javascript转换编码中将一个动态值从一个表单添加到另一个页面
- 为json对象创建一个动态表
- 为node.js创建一个动态的restful api
- 我如何创建一个动态地图来显示我们公司的位置
- 让ASP.NET中继器设置一个动态名称
- 在Javascript中连接一个动态变量名
- 读取一个动态填充的txt文件
- 有没有一种方法可以创建一个对象并同时为其指定一个动态特性
- 我已经创建了一个动态的下拉选择列表,它指向一行;如何使该行成为变量
- 如何获得一个动态增长的自定义对象的Javascript数组
- 用Javascript创建一个动态选择对象
- 我怎样才能创建一个动态表-Crossfilter-dc.js
- 根据使用php和javascript选择的另一个动态下拉框禁用下拉框
- 使用php创建动态组合框,并更改另一个动态组合框的值
- 创建一个动态图像上传PHP
- 使用bootstrap,jquery和javascript创建一个动态主页
- 在angularjs中构造一个动态表单
- JavaScript var 分配一个动态可为空的值显示脚本错误
- 如何使用带有值的 ID 选择选项到另一个动态选择选项值