for循環中的appendChild僅添加1個孩子

Question

在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> 

我已經看過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"; 
    } 
} 

Answer 1

你一遍又一遍追加相同的元素。每次你想要一個新的元素時，你都需要撥打document.createElement。

Answer 2

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

Answer 3

如果你想使元素的一個副本，你將需要克隆它。使用cloneNode()

因此改變

grid.tr.appendChild(grid.td); 

到

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