嘗試使用Javascript和CSS繪製網格元素

Question

我想創建一個正方形網格。爲此，我製作了一個二維數組，它將在某個位置產生一個div（這應該是它的位置乘以4px，因爲這是每個正方形的大小）我不知道我在做什麼因爲我的瀏覽器顯示沒有錯誤。我知道有什麼地方是錯誤的，因爲當我激活這個功能時沒有打印。爲了清楚起見，我已經將CSS屬性分配給'alive'和''死亡'類的元素，並在頁面末尾添加了'canvas' id，所以我假設錯誤在於創建divs自己。在創建網格時，甚至是正確的做法是否會一遍又一遍地創建div？我離題了。謝謝你的時間。

$(document).ready(function() { 
    "use strict"; 
    $("#btnstart").click(function() { 
     for (i = 0; i < xclength; i++) { 
      for (j = 0; j < yclength; j++) { 
       if (xycoords[i][j] === 1) { //if cell is alive 
        jQuery('<div/>', { 
         className: 'alive', 
         id: "x" + j + "y" + i, 
         css: { 
          position: "absolute", 
          top: (i * 4) + "px", 
          left: (j * 4) + "px" 
         } 
        }).appendTo('#canvas'); 
       } else { //if cell is dead 
        jQuery('<div/>', { 
         className: 'dead', 
         id: "x" + j + "y" + i, 
         css: { 
          position: "absolute", 
          top: (i * 4) + "px", 
          left: (j * 4) + "px" 
         } 
        }).appendTo('#canvas'); 
       } 
      } 
     } 
    }); 
}); 

Answer 1

這是一種使網格出div標籤的方法。生動的例子在這裏：http://jsfiddle.net/3x1kmcme/

var rows = 8, 
    cells = 8, 
    count = 0; 

var i, j, 
    top = 0, 
    left = 0; 

var boxWidth = 50, 
    boxHeight = 50; 

var $canvas = $('#canvas'); 
var $fragment = $(document.createDocumentFragment()); 

function addBox(opts) { 
    var div = document.createElement('div'); 
    div.id = opts.id; 
    div.className = 'alive'; 
    div.style.top = opts.top + "px"; 
    div.style.left = opts.left + "px"; 

    div.innerHTML = '<p>' + opts.count + '</p>'; 
    $fragment.append(div); 
} 

for (j = 0; j < rows; j += 1) { 
    top = j * boxHeight; 

    for (i = 0; i < cells; i += 1) { 
    count += 1; 

    addBox({ 
     count: count, 

     id: 'item' + i, 
     top: top, 
     left: i * boxWidth 
    }); 
    } 
} 

// Append all 
$canvas.html($fragment);