Question

我一直在完成一个名为＆＃34; The Odin Project＆＃34;的课程，而且我已经在一个项目上遇到了障碍，我们必须像画板那样创建一个Etch-A-Sketch。

项目的要点是......无论何时将鼠标悬停在表格中的单元格上，都会向该单元格添加一个更改颜色的类。我已经使用jQuery / javascript创建了一些代码，通过使用两个＆＃39;来附加表格行和单元格来创建一个正方形网格。循环（参见下面的脚本）。

我的问题是每当我运行＆＃39; for＆＃39;用附加代码循环来创建网格我没有得到方格。例如，我认为设置两个＆＃39; for＆＃39;循环到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);
}

Answer 2

您要将每个表格单元格附加到之前的每个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

Answer 3

试试这个：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>');
        }

})

两个更改......首先，您必须始终追加到相同的元素＆＃39; tbody＆＃39;。使用$（tr）附加到所有<tr>标签上其次，开始和结束td标签需要位于内环的每一侧。

嵌套＆＃39; for＆＃39;循环创建表

3 个答案: