我被一个小代码困住了，它就在我的脑海中。因此，使用 javascript，我创建一个 div 并尝试在 6x6 表格中显示它们，除非实际使用表格标签。 (这样做的原因是我必须在此之后做一些 table 会干扰的事情)。不管怎样，主要目标是用 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 程序员)的本地人，这仅适用于互联网编程类(class)。
谢谢大家
最佳答案
您显示的代码恰好创建了两个元素，一个 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 元素是 block 元素，因此每行不会有六个并排的元素，除非将它们设置为 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;
}关于javascript - 使用 javascript 在 6 x 6 的表格中生成 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39842852/