用 jquery 填充 html 表

populate html table with jquery

提问by Thomas

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

假设我有表，我想通过 jquery 在表中间附加数据。

here is my table code html

这是我的表格代码 html

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

here i need to append tr with jQuery

在这里我需要用 jQuery 附加 tr

<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

jquery可以吗？如果是这样，请指导我。如果我可以填充，那么我可以这样做

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

请指导谢谢

回答by Paul

EditBased 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

这里的例子：JSFiddle

回答by Muhammad Kashif

Below Code will populate html table with jquery.

下面的代码将使用 jquery 填充 html 表。

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

回答by Andrew

If you are adding the data in for loop, it would be more performant to build the string first then add it all in one call.

如果您在 for 循环中添加数据，则先构建字符串然后在一次调用中添加所有字符串会更高效。

var newRows = "";
for (var i = 0; i < data.d.length; i++) {
   newRows += "<tr><td>" + data.d[i].FirstName + 
              "</td><td>" + data.d[i].Age + "</td></tr>";
}
$("table tr:first").after(newRows);

回答by scessor

Add the id NamesGridViewto the first tr

添加id NamesGridView到第一个tr

<table border="1">
<tr id="NamesGridView">
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

and change the appendto after.

并将 更改append为after。

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

Also see my jsfiddle.

另请参阅我的jsfiddle。

回答by Baz1nga

$("table tr:first").after("<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>")

Basically use after()or before()use the right selector

基本上使用after()或before()使用正确的选择器

Live Demo

现场演示