如何以編程方式創建20x20px單元網格背景？

我試圖建立一個20x20px的正方形瀏覽器窗口大小的網格。我的第一個想法是用下面的代碼構建一個表格，但IE8（在任何模式下）不會呈現單元格，除非它們具有非空白空間內容。根據this，如果它有 ，但是從我的測試來看，它只在表格在原始DOM中時才起作用 - 而不是從javascript開始。如何以編程方式創建20x20px單元網格背景？


dojo.ready(function(){ 
    var grid = dojo.byId("grid"); 
    var tr; 
    for(var i=0; i<20; i++) { 
     tr = dojo.create("tr", null, grid); 
     for(var j=0; j<20; j++) { 
      var td =dojo.create("td", {innerHTML: "&nbsp;"}, tr); 
      dojo.style(td, {border: "solid", height: "20px", width: "20px"}); 
     } 
    } 
}); 
... 
<table id="grid" style="border-collapse: collapse;"></table>

這種辦法放棄後，我決定嘗試谷歌閉合的矢量圖形庫 - 思考的矢量繪圖會原則通過了更合適的解決方案，因爲表不適合這個..我得到它的工作橫瀏覽器，但是對於一個體面的大小的網格（比如說1000x1000）來說，加載時間和內存利用率是離譜的。我想這不是設計用於這兩種：


var graphics = goog.graphics.createGraphics(800, 800); 
var path, stroke = new goog.graphics.Stroke(1, "gray"); 

for(var x=0; x<65; x++) { 
for(var y=0; y<65; y++) { 
    path = new goog.graphics.Path(); 
    path.moveTo(0, y*20); 
    path.lineTo(800, y*20); 
    graphics.drawPath(path, stroke); 

    path = new goog.graphics.Path(); 
    path.moveTo(x*20, 0); 
    path.lineTo(x*20, 800); 
    graphics.drawPath(path, stroke); 
} 
} 

graphics.render(document.byId("grid")); 
...

也許務實的解決方案是創建一個20x20px圖像，並反覆插入？

來源

2009-12-25 Lightbeard

是否需要編程？因爲使用20x20像素的GIF作爲背景圖像，右下角有一行，您將在五分鐘內完成。它是跨瀏覽器的，並且也在大範圍內工作。

編輯：你的想法已經在問題的最後。是的，我認爲這是最簡單的方法。

來源

2009-12-25 03:15:12

有時候我做的事情了艱辛的道路......

body {background-image: url(grid-cell.png); background-repeat: repeat;}

來源

2009-12-25 03:23:51 Lightbeard

我不知道，如果Dojo庫修復IE的具體問題與表時動態創建它們，但如果沒有，則需要在添加行之前添加TBODY標記，否則IE將無法正確呈現表格。

來源

2009-12-25 03:36:10 scunliffe

如何以編程方式創建20x20px單元網格背景？

回答

相關問題