將數組轉換爲表

Question

我正在寫一個動態表，數據正在從數組中讀取，但是我無法成功創建表，我做錯了什麼？

HTML的一部分：

<tr id="rowTitle"> 
    <td align="middle"><strong>Name</strong></td> 
</tr> 

jQuery的一部分：

var name = ["Laura","Michael","Steve"] 
var count = 0 

for (var i = 0; i < name.length; i++) { 
    var row = '<tr>' 
      + '<td>' + name[count] + '</td>' 
      count++ 
      + '</tr>' 
} 

$(row).insertAfter($('#rowTitle')) 

Answer 1

試試這個：

var name = ["Laura","Michael","Steve"] 
var count = 0 
var row = ''; // initialize row outside loop 
for (var i = 0; i < name.length; i++) { 
    row += '<tr>'+ '<td>' + name[count] + '</td>'+(count++)+'</tr>'; // append html string into row using += 
} 
$(row).insertAfter($('#rowTitle')); // insert html after #rowTitle 

Answer 2

你只插入最後<tr>，insertAfter()應在每個循環中調用。然而，當你使用jQuery，我想你應該實際上使用jQuery的 - 在字符串中建立純HTML是一個壞主意：

var array = ["Laura","Michael","Steve"], $td, $tr; 
array.forEach(function(value) { 
    $tr = $('<tr>').insertAfter($('#rowTitle')), $td = $('<td>').appendTo($tr) 
    $td.text(value) 
}) 

產生一個與在相同的順序排爲array有效的標記。作爲一個副作用，更易讀和更易於維護，比創建複雜的'<tr>' + '<td>'等字符串。