javascript for 循环中的 appendChild 只添加 1 个孩子

appendChild in for loop only adds 1 child

提问by user1649326

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.

在 JavaScript 中，我正在创建一个带有 HTML 表格的网格（您在 Photoshop 中看到的网格类型）。网格大小将是可变的，即可由用户更改，因此必须计算每个网格方块的大小并除以可用像素数以获得精确大小的网格。

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.

我已经完成了所有这些，但是我在添加必要的表格元素来创建网格时遇到了问题。我的代码处于完整的工作状态，除非我appendChild()在 for 循环中使用该函数时它只附加一个孩子，而它应该附加到几百个。

My code:

我的代码：

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 pageand this page, and they sound promising but I just can't figure out how to make this work.

我已经看过这个页面和这个页面，它们听起来很有希望，但我就是不知道如何使这个工作。

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

回答by TheZ

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

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

回答by epascarello

If you want to make one copy of the element, you will need to clone it. Use cloneNode()

如果要制作元素的一个副本，则需要克隆它。使用cloneNode()

So change

所以改变

grid.tr.appendChild(grid.td);

to

到

grid.tr.appendChild(grid.td.cloneNode(true));

回答by Mutahhir

for(var j = 0; j < 10; j++)
{
        grid.tr.appendChild(grid.td);
}

should be

应该

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