使用javascript在6 x 6的表中生成div

时间:2016-10-04 01:24:11

标签: javascript html

我被困在一个小代码上,它正好在我头上。所以使用javascript,我创建一个div并尝试在6x6表中显示它们,除非实际使用表标记。 (这样做的原因是我必须在此之后做一些事情,表会干扰)。无论如何,主要目标是使用javascript生成一个6x6的红色100px正方形表。每个div都有自己唯一的ID用于以后的目的,但是我需要帮助的是让这个表正确显示..到目前为止我的代码。

   <!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程序员)的原生代码,这只适用于互联网编程课程。

感谢任何人

1 个答案:

答案 0 :(得分:0)

您显示的代码正好创建了两个元素,一个div和一个br。 .appendChild() method不会创建div的其他副本,只是插入或移动第一个副本。 (除非在这种情况下,您要将其附加到已存在的地方,这没有效果。)

无论如何,所需的简单修复就是在循环中创建一个新的div:

&#13;
&#13;
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();
&#13;
&#13;
&#13;

请注意,默认情况下div元素是块元素,因此除非您将它们设置为display: inlinedisplay: inline-block,否则您不会在每一行上并排获得六个元素。

不是直接设置所有这些样式,而是在CSS中设置它们并仅指定一个类更好:

&#13;
&#13;
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();
&#13;
.cell {
  width: 10px;
  height: 10px;
  background: red;
  display: inline-block;
  margin: 1px;
}
&#13;
&#13;
&#13;