我被困在一个小代码上,它正好在我头上。所以使用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程序员)的原生代码,这只适用于互联网编程课程。
感谢任何人
答案 0 :(得分:0)
您显示的代码正好创建了两个元素,一个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();
&#13;
请注意,默认情况下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();
&#13;
.cell {
width: 10px;
height: 10px;
background: red;
display: inline-block;
margin: 1px;
}
&#13;