forChild循环中的appendChild仅添加1个孩子 [英] appendChild in for loop only adds 1 child

问题描述

在JavaScript中，我正在使用HTML表创建一个网格(您在Photoshop中看到的网格类型).栅格大小将是可变的，即可由用户更改，因此必须计算每个栅格正方形的大小，然后除以可得到精确大小的栅格的像素数.

In JavaScript I am creating a grid (the type of grid you see in Photoshop) with HTML tables. The grid size is going to be variable, i.e., changeable by the user, so the size of each grid square must be calculated and divided by the number of pixels available to get an exact size grid.

我已经完成了所有这些操作，但是在添加必要的表格元素以创建网格时遇到了问题.我的代码处于完整的工作状态，除了当我在for循环内使用appendChild()函数时，它只附加一个孩子，而该子对象最多只能附加数百个孩子.

I've done all this, but I have a problem adding in the necessary table elements to create the grid. My code is in full working order, except when I use the appendChild() function inside a for loop it only ever appends a single child, when it should be appending up to a couple of hundred.

我的代码:

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";
    }
}

这只会返回其中包含单个表数据的单个表行，如下所示:

This only ever returns a single table row with single table data inside, like so:

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

我已经查看了此页面和

I've already looked at this page and this page, and they sound promising but I just can't figure out how to make this work.

EDIT :代码现在可以使用，解决方案:

EDIT: Code now working, solution:

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";
    }
}

推荐答案

您要一遍又一遍地添加相同的元素.每次希望有一个新元素时，都需要调用document.createElement.

You are appending the same element over and over. You need to call document.createElement each time you wish to have a new element.

这篇关于forChild循环中的appendChild仅添加1个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！