populate html table with jquery

Question

suppose i have table and i want to append data in the middle of table through jquery.

here is my table code html

  <table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>

here i need to append tr with jQuery

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> 

is it possible with jquery? if so then please guide me. if i can populate then i can do like

for (var i = 0; i < data.d.length; i++) {
            $("#NamesGridView").append("<tr><td>" + data.d[i].FirstName + 
                                     "</td><td>" + data.d[i].Age + "</td></tr>");
         }
       }

please guide thanks

Answer 1

Below Code will populate html table with jquery.

<table id="tablefriendsname">
  <tbody>
  </tbody>
</table>

$.ajax({    
type: "POST",
url: "/users/index/friendsnamefromids",
data: "IDS="+requests,
dataType: "json", 
success: function(response){
    var name = response;
            //Important code starts here to populate table  
    var yourTableHTML = "";
        jQuery.each(name, function(i,data) {
            $("#tablefriendsname").append("<tr><td>" + data + "</td></tr>");
        });
}
});

Answer 2

Edit Based on comment:

$('#thetable tr').not(':first').not(':last').remove();
var html = '';
for(var i = 0; i < data.d.length; i++)
            html += '<tr><td>' + data.d[i].FirstName + 
                    '</td><td>' + data.d[i].Age + '</td></tr>';
$('#thetable tr').first().after(html);

Example here: JSFiddle