javascript - 嵌套 'for' 循环创建表

Question

我一直在学习一个名为“Odin 项目”的类(class)，但我在一个项目上遇到了瓶颈，因为我们必须创建一个像画板一样的 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>');
  }
}

Answer 1

您需要附加正方形 td元素到最后 tr您刚刚创建的元素。您正在附加 td 所有 tr 的元素元素。

您可以使用 :last selector ，或 .last() method为此。

Updated Example

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

您也可以只创建一个 tr元素，附加 td元素，然后附加 tr表的元素:

Updated Example

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);
}