使用 Javascript 创建动态网格

Question

我是 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";
        };
    };
};

Answer 1

是的，逻辑是正确的，尽管存在一些 syntax/type 错误，并且存储可重用变量并且只有 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);

Answer 2

CAUSE

代码存在一些问题。

for 循环的语法是 for(init;condition;final-expression)，参见 for 的手册。
appendChild 需要节点而不是字符串。
函数grid()不做任何事情。它应该 return 一个节点，接受一个节点附加到某处或在某处插入内容，由您决定。

DEMO

请参阅下面的演示以获取更正后的代码和演示。

/* 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; 
}

Answer 3

/* 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使用;分隔表达式，而不是,（它们都是可选的）

Answer 4

你应该注意你在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());

您可以参考：

Document.getElementById()
Node.appendChild()
Document.createElement()
Nicholas C. Zakas - Speed up your JavaScript, Part 4，表示可以将所有的子节点追加到父节点，然后将父节点追加到its父节点。

Answer 5

您需要注意很多语法错误，例如：

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();

这是一个fiddle

使用 Javascript 创建动态网格

Creating a dynamic grid with Javascript

javascript

dynamic