用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

原因

代碼存在一些問題。

• for循環的語法是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; } 

Answer 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 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（）
• 尼古拉斯C. Zakas -加快你的JavaScript，第4部分 ，它告訴你可能所有的子節點添加到父節點，然后追加到它的父節點的父節點。

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

這是小提琴