Я пытаюсь построить сетку размером с окно браузера с квадратами 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: " "}, tr);
dojo.style(td, {border: "solid", height: "20px", width: "20px"});
}
}
});
...
<table id="grid" style="border-collapse: collapse;"></table>
После отказа от такого подхода, я решил попробовать библиотеку векторной графики Google замыканию в - думал векторный рисунок будет более подходящим решением в принципе, так как таблицы не предназначены для этого .. Я получил это работает крест браузера, но для сетки с приличным размером (скажем, 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 изображение и повторно вставить это?