嵌套'对于'循环以创建表

Nested 'for' Loop to Create Table

本文关键字：创建 对于 嵌套 循环      更新时间：2023-09-26

我一直在学习一门名为"奥丁项目"的课程，我在一个项目上遇到了困难，因为我们必须创建一个类似Etch-a-Sketch的画板。

该项目的要点是…每当你将鼠标悬停在表中的一个单元格上时，就会向该单元格添加一个类来更改颜色。我已经使用jQuery/javascript创建了一些代码，通过使用两个"for"循环附加表行和单元格来创建方形网格（请参阅下面的脚本）。

我的问题是，每当我用附加代码运行"for"循环来创建网格时，我都不会得到方形网格。例如，我认为将两个"For"循环都设置为4的极限应该会给我一个4行、4个单元格的网格。我实际得到的是第一行有16个单元格，第二行有12个单元格，等等…我哪里错了？

链接到jsfiddle。。。

http://jsfiddle.net/rellbows/qka0ago7/1/

for (var w = 0; w < 4; w++) {
  $('tbody').append('<tr></tr>');
  for (var j = 0; j < 4; j++) {
    $('tr').append('<td class="square"></td>');
  }
}

您需要将方形td元素附加到刚刚创建的最后一个tr元素上。您将td元素附加到所有tr元素。

为此，您可以使用:last选择器，也可以使用.last()方法。

更新示例

$('tr:last').append('<td class="square"></td>');

您也可以创建一个tr元素，将td元素附加到它，然后将该tr元素附加到表中：

更新示例

for (var w = 0; w < 4; w++) {
    var $tr = $('<tr></tr>');
    for (var j = 0; j < 4; j++) {
        $tr.append('<td class="square"></td>');
    }
    $('tbody').append($tr);
}

您正在将每个表单元格附加到之前的每个tr标记。

相反，您应该识别每一行，并将当前行的单元格附加到该行。

for (var w = 0; w < 4; w++) {
    $('tbody').append('<tr id="row' + w + '"></tr>');
    for(var j = 0; j < 4; j++) {
        $('#row' + w).append('<td class="square"></td>');
    }
}

JSFiddle

试试这个：fiddle

$(document).ready(function() {
    for (var w = 0; w < 4; w++) {
            $('tbody').append('<tr>');
                for(var j = 0; j < 4; j++) {
                    $('tbody').append('<td class="square"></td>');
                }
            $('tbody').append('</tr>');
        }
})

两项更改。。。首先，您必须始终附加到同一个元素"tbody"上。使用$（tr）是附加到所有<tr>标签上
其次，开始和结束td标记需要位于内部循环的每一侧。

相关文章：