嵌套'爲'循環創建表

Question

我一直在通過一個叫做「Odin項目」的課程，並且我在一個項目上碰到了一道牆，我們必須創建一個像草圖板一樣的刻蝕草圖。

該項目的要點是......每當您將鼠標懸停在表格中的某個單元格上時，就會向該單元格中添加一個可更改顏色的類別。我使用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); 
} 

Answer 2

你ar e將每個表格單元格追加到之前出現的每個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>'); 
     } 

}) 

兩個變化......首先你必須始終追加到相同的元素 'TBODY'。使用$（tr）附加到所有<tr>標籤上。
其次，開始和結束td標籤需要位於內部循環的每一側。