for循环追加html js_javascript – for循环中的appendChild只添加1个孩子

在

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 "

" 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 page和this page,他们听起来很有希望,但我无法弄清楚如何使这项工作.

编辑：代码现在工作,解决方案：

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

}

}