使用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

回答

相关问题