0

20x20px の正方形を持つブラウザー ウィンドウのサイズのグリッドを作成しようとしています。私の最初のアイデアは、次のコードでテーブルを作成することでしたが、空白以外のコンテンツがない限り、IE8 (どのモードでも) はセルをレンダリングしません。thisによると、 がある場合はそうなります が、私のテストでは、テーブルが元の 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"));
...

おそらく実用的な解決策は、20x20px の画像を作成し、それを繰り返し挿入することでしょうか?

4

3 に答える 3

1

プログラムで行う必要がありますか？背景画像として 20x20 ピクセルの GIF を使用し、右と下に線を引くと、5 分で完了します。クロス ブラウザーであり、巨大な領域でも動作します。

編集：質問の最後にすでにその考えがありました。はい、それが最も簡単な方法だと思います。

于 2009-12-25T03:15:12.887 に答える
1

時には難しいことをすることもあります...

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

^^

于 2009-12-25T03:23:51.867 に答える
0

Dojoライブラリーがテーブルを動的に作成するときに IE の特定の問題を修正するかどうかはわかりませんが、そうでない場合は、行を追加する前にTBODYタグを追加する必要があります。そうしないと、IE はテーブルを適切にレンダリングできません。

于 2009-12-25T03:36:10.753 に答える