使用JavaScript生成表格多數民衆贊成在6×6

我被困在一個小代碼，它的權利在我的頭上。所以使用JavaScript，我創建了一個div，並試圖在6x6表中顯示它們，除非沒有實際使用表標記。（之所以這樣，是因爲在桌子干擾後我必須做點什麼）。無論如何，主要目標是使用javascript生成一個紅色100px正方形的6x6表格。每個div將有自己的唯一ID用於以後的目的，但我需要幫助的是讓這張桌子正確顯示..繼承我的代碼到目前爲止。使用JavaScript生成表格多數民衆贊成在6×6

<!doctype html> 
    <html>  

    <title></title> 
    <head> 

    <script type="text/javascript"> 

    function generateGrid(){ 
    var div = document.createElement("Div"); 
    div.style.width = "100px"; 
    div.style.height="100px"; 
    div.style.background = "red"; 
    linebreak = document.createElement("br"); 

    for(i=0;i<6;i++){ 

     for(b=0;b<6;b++){ 
      document.body.appendChild(div); 
     } 
      document.body.appendChild(linebreak); 
    } 
    } 
    </script> 
    </head>  

    <body> 
    <script>generateGrid();</script> 

    </body>  

    </html>

由於某種原因，它只顯示一個紅色框。我確定它是一個非常簡單的錯誤，但我無法找到解決方法，而且我不是原生JavaScript（java程序員），這只是一個互聯網編程類。

感謝任何人

來源

2016-10-04 lionetti12345

您顯示的代碼恰好創建了兩個元素，一個div和一個br。 .appendChild() method不會創建額外的div副本，它只是插入或移動第一個副本。（除非在這種情況下，你說的話將其追加到已經存在的地方，它有沒有效果。）

總之，需要簡單的解決方法就是建立在循環中一個新的div：

function generateGrid() { 
 
    var div; 
 
    for (i = 0; i < 6; i++) { 
 
    for (b = 0; b < 6; b++) { 
 
     div = document.createElement("div"); 
 
     div.style.width = "10px"; 
 
     div.style.height = "10px"; 
 
     div.style.background = "red"; 
 
     div.style.display = "inline-block"; 
 
     div.style.margin = "1px"; 
 
     document.body.appendChild(div); 
 
    } 
 
    document.body.appendChild(document.createElement("br")); 
 
    } 
 
} 
 

 
generateGrid();

不過請注意，默認情況下的div元素是塊元素，這樣你就不會送六個並排在每一行，除非你將其設置爲display: inline或display: inline-block。

，而不是直接將所有的這些風格，這將是更好的，設定成CSS和公正的分配類：

function generateGrid() { 
 
    var div; 
 
    for (i = 0; i < 6; i++) { 
 
    for (b = 0; b < 6; b++) { 
 
     div = document.createElement("div"); 
 
     div.className = "cell"; 
 
     document.body.appendChild(div); 
 
    } 
 
    document.body.appendChild(document.createElement("br")); 
 
    } 
 
} 
 

 
generateGrid();

.cell { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: red; 
 
    display: inline-block; 
 
    margin: 1px; 
 
}

來源

2016-10-04 01:33:32 nnnnnn

這是取得了一些進展。除了沒有正確顯示。它顯示第一列6，但形狀扭曲，只有一列。我看看我能否從這裏篡改它。非常感謝。 – lionetti12345

我已經提供了一個解釋的更新。 – nnnnnn

好吧，我是個白癡，我知道我必須用內聯塊做點什麼......非常感謝你 – lionetti12345

使用JavaScript生成表格多數民衆贊成在6×6

回答

相關問題