Javascript 如何使用循环生成16 x 16内联块栅格？

我正在尝试使用循环中的循环自动生成16×16的正方形网格

div

。我创建了两个类：

.square {
    height: 2.5rem;
    width: 2.5rem;
    background-color: white;
    display: inline-block;

}

及

我有这个功能：

$('#b1').click(function() {
   for(i=0; i<16; i++) {
       $('#pixelgrid').append('<div class="line">');
       for(j=0; j<16; j++) {
           $('#pixelgrid').append('<div class="square">'+j+'</div>');
       }
    $('#pixelgrid').append('</div>');
   }
});

$（'#b1'）。单击（函数（）{
对于（i=0；i我将
显示：内联块；
更改为
显示：表格单元格；
更改为
.square
，并将对齐方式也移动到
.square

正如@Danko在评论中指出的，您根本不需要
.line
类

我还重新编写了jQuery，使它稍微优化了一点（如果这很重要的话）


JQUERY



我将
显示：内联块；
更改为
显示：表格单元格；
用于
.square
，并将对齐方式也移动到
.square

正如评论中指出的@Danko所指出的，您根本不需要
.line
类

我还重新编写了jQuery，使它稍微优化了一点（如果这很重要的话）


JQUERY



如果您希望将内容居中，请尝试此操作。使用
行高将文本垂直居中，并在
上应用
文本对齐：居中
。方形
类：


.square {
    height: 2.5rem;
    width: 2.5rem;
    background-color: white;
    display: inline-block;
    line-height:2.5rem;
    text-align: center;
}
.line {
    width: 800px;
}
body {
    background:#000;
}

如果您希望将内容居中，请尝试此操作。使用
行高将文本垂直居中，并在
.square
类上应用
文本对齐：居中：


.square {
    height: 2.5rem;
    width: 2.5rem;
    background-color: white;
    display: inline-block;
    line-height:2.5rem;
    text-align: center;
}
.line {
    width: 800px;
}
body {
    background:#000;
}

使用
append（）
函数，您可能会得到一些有趣的结果（分别为“line”div添加开始和结束标记）…相反，尝试为每一行创建整个div，并在其中添加正方形，如下所示：

var $newLine;
$('#b1').click(function() {
    for (i=0; i<16; i++) {
        $newLine= $('<div class="line"></div>');
        $('#pixelgrid').append($newLine);

        for (j=0; j<16; j++) {
            $newLine.append('<div class="square">'+j+'</div>');
        }
    }
});

var$newLine；
$（'#b1'）。单击（函数（）{
对于（i=0；i使用
append（）
函数，您可能会得到一些有趣的结果（分别为“line”div添加开头和结尾标记）…相反，请尝试为每一行创建整个div并在其中添加正方形，如下所示：

var $newLine;
$('#b1').click(function() {
    for (i=0; i<16; i++) {
        $newLine= $('<div class="line"></div>');
        $('#pixelgrid').append($newLine);

        for (j=0; j<16; j++) {
            $newLine.append('<div class="square">'+j+'</div>');
        }
    }
});

var$newLine；
$（'#b1'）。单击（函数（）{
对于（i=0；i您需要做三件事：

这是一张表，使用

缓存jQuery对象/选择器
完成后，仅向DOM追加
这是密码和密码
您需要做三件事：

这是一张表，使用

缓存jQuery对象/选择器
完成后，仅向DOM追加
这是密码和密码
“它们没有显示为
内联块
”是什么意思？您希望它们看起来是什么样子？对我来说显示正确。也许可以将窗口调整得更大一些，这样它就不会换行。如果换行是您的问题，请尝试添加
#pixelgrid{white space:nowrap；}
您没有在行内添加块…就在行后。您所说的“它们没有显示为
内联块”
是什么意思？您希望它们的外观如何？它对我来说显示正确。可能会将窗口调整得更大，这样它就不会换行。如果换行是您的问题，请尝试添加
\pixelgrid{white space:nowrap；}
您没有将块追加到行内…就在行后。很好的方法..注意您不需要行。块正方形不在行内。即使您不需要设置样式，也可以使用类“line”标记外部div…每一行都是一个独特但通用的单位。有一种方法可以识别该集合中的每一项，而不必派生它，这可能会有所帮助。@talemyn-这也是事实。OP可以自己进行区分。这确实更加优雅和高效。非常感谢大家！@Hubologist-没问题，很高兴大家对它满意它！很好的方法..注意你不需要线条。方块不在里面。即使你不需要设置它的样式，用类“line”标记外部div也有好处…每一行都是一个独特但通用的单位。有一种方法可以识别该集合中的每一项，而不必派生它，这可能会有所帮助。@talemyn-这也是事实。OP可以自己进行区分。这确实更加优雅和高效。非常感谢大家！@Hubologist-没问题，很高兴大家对它满意它！我不会假设一个
是最好的方法…在不知道他对网格的意图的情况下，我会简单地提供它作为一个替代方案，而不是解决方案。我不会假设一个
是最好的方法…在不知道他对网格的意图的情况下，我会简单地提供它作为一个替代方案，不是吗这不是解决办法。
var $newLine;
$('#b1').click(function() {
    for (i=0; i<16; i++) {
        $newLine= $('<div class="line"></div>');
        $('#pixelgrid').append($newLine);

        for (j=0; j<16; j++) {
            $newLine.append('<div class="square">'+j+'</div>');
        }
    }
});

var $table = $('#pixelgrid');
var html = [];
var row, col;
for(row=0; row<16; row++) {
    html.push('<tr class="line">')
    for(col=0; col<16; col++) {
        html.push('<td class="square">'+col+'</td>');
    }
    html.push('</tr>');
}
$table.append(html.join(''));

body {
    background:#000;
}
#pixelgrid {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: white;
}

.square {
    height: 2.5rem;
    width: 2.5rem;
    text-align: center;
    vertical-align: middle;
}