如何以编程方式创建 20x20px 单元格网格背景？答案

【问题标题】：How to create a 20x20px cell grid background programmatically?如何以编程方式创建 20x20px 单元格网格背景？
【发布时间】：2025-12-23 08:20:14
【问题描述】：

我正在尝试构建一个具有 20x20 像素正方形的浏览器窗口大小的网格。我的第一个想法是使用以下代码构建一个表格，但 IE8（在任何模式下）不会呈现单元格，除非它们具有非空白内容。根据this，如果它有&nbsp;，它会，但从我的测试来看，它只有在表在原始DOM中时才有效 - 而不是来自javascript。


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>

放弃这种方法后，我决定尝试使用 google-closure 的矢量图形库 - 原则上认为矢量图形将是更合适的解决方案，因为表格不是为此而设计的。我让它跨浏览器工作，但对于一个大小合适的网格（比如 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"));
...

也许实用的解决方案是创建一个 20x20 像素的图像并重复插入？

【问题讨论】：

标签： javascript css dojo google-closure-library

【解决方案1】：

必须以编程方式进行吗？因为使用 20x20 像素的 GIF 作为背景图像，在右下角有一条线，您将在五分钟内完成。它是跨浏览器，也适用于大范围。

编辑：您在问题结束时已经有了这个想法。是的，我认为这是最简单的方法。

【讨论】：

【解决方案2】：

有时我做事很艰难......

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

【讨论】：

【解决方案3】：

我不确定 dojo 库是否在您动态创建表格时修复了 IE 的特定问题，但如果没有，您需要在添加行之前添加 TBODY 标签，否则 IE 会无法正确呈现表格。

【讨论】：