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

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

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

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>");
    }
}

您的行现在将按时间顺序附加。

第二种解决方案是在:last 伪选择器上使用.after() 以及与#tHead 一起使用的.siblings() 选择器。

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 2

反转你的循环，它会按你的意愿工作

$(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 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 关于迭代数组的不同方法。