如何將行數據逐個追加到表中？

Question

這裏是我的html代碼

<tr id="tHead"> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 

這裏是我的js代碼

$(document).ready(function(){ 
    $.ajax({ 
     url: "data.json", 
     dataType: "json", 
     success: function(obj) { 
      for(i=0;i<obj.data.length;i++){ 
       $("#tHead").after("<tr>" + 
       "<td>" + obj.data[i].name1 + 
       "</td><td>" + obj.data[i].name2 + 
       "</td><td>" + obj.data[i].name3 + 
       "</td><td>" + obj.data[i].name4 + 
       "</td><td>" + obj.data[i].name5 + 
       "</td></tr>"); 
      } 
     } 
    }); 
}); 

現在我可以後 「的tHead」 TR追加數據。 由於我在我的js代碼中使用.after，因此數據行將在「tHead」之後逐一追加，這將使我的第一個數據行成爲表中的最後一個。

我需要第一個數據行時，我將它附加在表上的第一行。 我能做些什麼才能使其正確？

我嘗試使用.append但不工作，新行將直接追加到「tHead」行的末尾。

Answer 1

倒置的循環，它會工作，只要你想

$(document).ready(function() 
{ 
    $.ajax(
    { 
     url: "data.json", 
     dataType: "json", 
     success: function(obj) 
     { 
      for(i=obj.data.length-1;i>=0;i--) 
      { 
       $("#tHead").after("<tr>" + 
       "<td>" + obj.data[i].name1 + 
       "</td><td>" + obj.data[i].name2 + 
       "</td><td>" + obj.data[i].name3 + 
       "</td><td>" + obj.data[i].name4 + 
       "</td><td>" + obj.data[i].name5 + 
       "</td></tr>"); 
      } 
     } 
    }); 
}); 

Answer 2

您只需要在父表上使用.append()，而不是在#tHead

success: function(obj) { 
    for(var i = 0; i < obj.data.length; i++) { 
     $("#tHead").parent("table").append("<tr>" + 
     "<td>" + obj.data[i].name1 + 
     "</td><td>" + obj.data[i].name2 + 
     "</td><td>" + obj.data[i].name3 + 
     "</td><td>" + obj.data[i].name4 + 
     "</td><td>" + obj.data[i].name5 + 
     "</td></tr>"); 
    } 
} 

你行使用.after()會現在按照時間順序添加。

第二種解決辦法是對:last僞選擇器與#tHead使用的.siblings()選擇器一起使用.after()。

success: function(obj) { 
    for(var i = 0; i < obj.data.length; i++) { 
     $("#tHead").siblings("tr:last").after("<tr>" + 
     "<td>" + obj.data[i].name1 + 
     "</td><td>" + obj.data[i].name2 + 
     "</td><td>" + obj.data[i].name3 + 
     "</td><td>" + obj.data[i].name4 + 
     "</td><td>" + obj.data[i].name5 + 
     "</td></tr>"); 
    } 
} 

Answer 3

事情是這樣的，也許：

$(document).ready(function(){ 
    $.ajax({ 
    url: "data.json", 
    dataType: "json", 
    success: function(obj) { 

    $("#tHead").append("<tr>");//----------- open new row. 
    obj.forEach(function(row) { 
     $("#tHead").append("<td>"); 
     $("#tHead").append(row);//---------- actual info. 
     $("#tHead").append("</td>"); 
    }); 
    $("#tHead").append("</tr>");//---------- close new row. 
    } 
    } 
});  
}); 

一個很好的讀取可以在這裏找到：https://stackoverflow.com/a/9329476/2645091 上不同的方式來遍歷數組。