How to append row data to table one by one?

Question

Here is my html code

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

Here is my js code

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

Now I can append data after "tHead" tr. Because I use .after in my js code, so the data row will append one by one after"tHead" which will make my first data row become the last one in table.

I need first data row will be first row on table when I append it. What can I do to make it correct?

I try to use .append but not work, the new row will directly append in the end of "tHead" row.

Use reverse loop, `for (i = obj.data.length -1; i >= 0; i--) {` — Tushar, Oct 13 '15 at 09:28

score 1 · Answer 1 · answered Oct 13 '15 at 09:33

You simply need to use .append() on the parent table, instead of using .after() on the #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>");
    }
}

your rows will now be appended in chronological order.

A second solution would be to use .after() on the :last psuedo selector together with the .siblings() selector used with #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>");
    }
}

Diptox · Answer 2 · 2015-10-13T09:36:14.107

-1

Invert your loop , and it will work as you want

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

edited Oct 13 '15 at 09:36

answered Oct 13 '15 at 09:30

Diptox

1,809
10
19

3

Add some description, or remove this answer and add this as comment – Tushar Oct 13 '15 at 09:31
you can write the same in comment also. @Diptox – Pedram Oct 13 '15 at 09:32
@rajeshmpanchal Just because an answer is short enough to be a comment, it doesn't mean that it is not an answer. This is an answer to the question, LQ, but is an answer. – AStopher Oct 13 '15 at 09:33

score -1 · Answer 3 · edited May 23 '17 at 12:09

-1

Something like this maybe:

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

An excellent read can be found here : https://stackoverflow.com/a/9329476/2645091 on the different ways to iterate arrays.

edited May 23 '17 at 12:09

Community

1
1

answered Oct 13 '15 at 09:48

Karlta05

165
10

This does not answer the problem. OP's problem is the order rows appear in his table. He don't want them to appear directly under `#tHead` but after the last `tr`. – NachoDawg Oct 13 '15 at 09:53
@NachoDawg I disagree with you on that. If you refer to this line "I need first data row will be first row on table when I append it. What can I do to make it correct?" clearly shows what he is asking. I think you were thinking that his code example was his question. – Karlta05 Oct 13 '15 at 10:02

How to append row data to table one by one?

3 Answers3