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

CAUSE

代码有一些问题。

• for 循环的语法是for(init;condition;final-expression)，参见for 手册.
• appendChild 需要节点而不是字符串。
• 函数 grid() 不执行任何操作。它应该返回一个节点，接受要追加的节点或在某处插入内容，由您决定。

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