用jquery填充html表

时间:2011-08-25 19:41:42

标签: jquery

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

这是我的表格代码html

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

这里我需要用jQuery追加tr

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

是否可以使用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>");
         }
       }

请指导谢谢

5 个答案:

答案 0 :(得分:15)

修改根据评论:

$('#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);

此处示例:JSFiddle

答案 1 :(得分:8)

Code下面将使用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>");
        });
}
});

答案 2 :(得分:3)

如果要在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);

答案 3 :(得分:2)

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

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

Live Demo

答案 4 :(得分:2)

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>

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

另见jsfiddle