如何将行数据逐个追加到表中？

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 上不同的方式来遍历数组。