如何以编程方式创建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单元网格背景？

回答

相关问题