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

现在我可以在＆＃34; tHead＆＃34;之后添加数据。 TR。因为我在我的js代码中使用.after，所以数据行将在＆＃34; tHead＆＃34;之后逐个追加。这将使我的第一个数据行成为表格中的最后一行。

当我追加它时，我需要第一行数据行将是第一行。我该怎么做才能使它正确？

我尝试使用.append但不起作用，新行将直接附加在＆＃34; tHead＆＃34;行。

Answer 1

您只需在父表上使用.append()，而不是在.after()上使用#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以及与.siblings()一起使用的#tHead选择器。

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) {

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

Answer 3

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

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

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

3 个答案: