12

JavaScript で、HTML テーブルを使用してグリッド (Photoshop で表示されるグリッドのタイプ) を作成しています。グリッド サイズは可変、つまりユーザーが変更できるため、正確なサイズのグリッドを取得するには、各グリッドの正方形のサイズを計算し、使用可能なピクセル数で割る必要があります。

これをすべて実行しましたが、グリッドを作成するために必要なテーブル要素を追加するのに問題があります。私のコードは完全に機能していますが、 for ループ内で関数を使用する場合はappendChild()、数百まで追加する必要がある場合に、単一の子のみを追加します。

私のコード:

grid.show = function(event)
{
    var e = event;

    if(grid.show_grid == false)
    {
        grid.show_grid = true;

        parent.document.getElementById("grid_table").style.display = "block";

        // Get grid (table) and create some elements.
        grid.get_grid = parent.document.getElementById("grid_table");
        grid.tr       = parent.document.createElement("tr");
        grid.td       = parent.document.createElement("td");

        // Clear the grid of all squares so we don't have to worry about subtracting anything.
        grid.get_grid.innerHTML = "";

        // Calculate the number of horizontal and vertical squares.
        var horizontal = Math.ceil(grid.total_width / grid.size);
        var vertical   = Math.ceil(grid.total_height / grid.size);

        // This was a nested loop, removed for demonstration.
        // Attempting to add 10 "<tr><td></td></tr>" to the table.
        for(var j = 0; j < 10; j++)
        {
            grid.tr.appendChild(grid.td);
        }

        //console.log(grid.tr);

        // Add the elements to the table.
        grid.get_grid.appendChild(grid.tr);

    }
    else
    {   
        grid.show_grid = false;
        parent.document.getElementById("grid_table").style.display = "none";
    }
}

これは、次のように、単一のテーブル データを含む単一のテーブル行のみを返します。

<tr>
    <td></td>
</tr>

私はすでにこのページとこのページを見てきましたが、有望に思えますが、これを機能させる方法がわかりません。

編集:コードが機能するようになりました、解決策:

grid.show = function(event)
{
    var e = event;

    if(grid.show_grid == false)
    {
        grid.show_grid = true;

        parent.document.getElementById("grid_table").style.display = "block";

        grid.get_grid           = parent.document.getElementById("grid_table");
        grid.tr                 = null;
        grid.td                 = null;
        grid.get_grid.innerHTML = "";

        var horizontal = Math.ceil(grid.total_width / grid.size);
        var vertical   = Math.ceil(grid.total_height / grid.size);

        for(var i = 0; i < vertical; i++)
        {
            grid.tr = parent.document.createElement("tr");

            for(var j = 0; j < horizontal; j++)
            {
                grid.td = parent.document.createElement("td");

                grid.td.width = grid.size;
                grid.td.height = grid.size;

                grid.tr.appendChild(grid.td);
            }
            grid.get_grid.appendChild(grid.tr);
        }
    }
    else
    {   
        grid.show_grid = false;
        parent.document.getElementById("grid_table").style.display = "none";
    }
}
4

3 に答える 3

28

同じ要素を何度も追加しています。document.createElement新しい要素が必要になるたびに呼び出す必要があります。

編集:要素のセットアップが非常に複雑で、子が含まれる可能性がある場合は、 Node.cloneNodeも使用できます

于 2012-10-04T15:40:04.953 に答える
13

要素の 1 つのコピーを作成する場合は、それを複製する必要があります。cloneNode()を使用する

だから変える

grid.tr.appendChild(grid.td);

に

grid.tr.appendChild(grid.td.cloneNode(true));
于 2012-10-04T15:42:46.763 に答える
5 
for(var j = 0; j < 10; j++)
{
        grid.tr.appendChild(grid.td);
}

する必要があります

for(var j = 0; j < 10; j++) {
    var newTd = parent.document.createElement('td');
    grid.tds.push(newTd); // if you need it, not sure why though
    grid.tr.appendChild(newTd);
}
于 2012-10-04T15:42:35.460 に答える