如何将行数据一个接一个地附加到表中

How to append row data to table one by one?

本文关键字：一个 数据      更新时间：2023-09-26

这是我的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>");
            }
        }
    });
});

现在我可以在"head"tr后附加数据。因为我在js代码中使用。after，所以数据行将一个接一个地附加在"head"之后，这将使我的第一个数据行成为表中的最后一个。

我需要的第一个数据行将是第一行的表，当我追加它。我该怎么做才能纠正呢?

我尝试使用。append但不工作，新行将直接追加在" head "行结束

您只需要在父表上使用.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 psuedo选择器上使用.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>");
    }
}

反转循环，它就会像你想的那样工作了

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

可能是这样的:

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

相关文章：