Question

这是我的代码：

$(document).ready(function () {

    $.ajax({
        url: '/blog/getposts',
        type: 'GET',
        dataType: 'json',
        success: function (result) {

            var insert = '';

            $.each(result, function (index, item) {
                insert += '<tr><td>' + item.Name + '</td><td>' + item.Body + '</td><td>' + item.DateCreated + '</td></tr>';
            });
            $('#blogTable').append(insert);
        }


    });
});

当我不尝试插入任何<tr>或<td>标记时，它会起作用，但当我包含这些标记时，不会显示任何内容。我也有Firebug，但我不知道该找什么。

我想显示一个包含Name，Body和DateCreated标题的表，然后显示下面列出的每个条目的所有数据。

编辑：我的JSON结果

[
{"PostId":4,"UserId":2,"Body":"testtat","DateCreated":"\/Date(1301692095627)\/","Name":"derper"},  
{"PostId":3,"UserId":2,"Body":"tesateat","DateCreated":"\/Date(1301692093497)\/","Name":"derper"},  
{"PostId":2,"UserId":2,"Body":"testest","DateCreated":"\/Date(1301692091527)\/","Name":"derper"},  
{"PostId":1,"UserId":2,"Body":"derprperp","DateCreated":"\/Date(1301692082100)\/","Name":"derper"}
]

编辑：来自FireBug的InnerHTML粘贴

<tbody><tr>
    <th>Name</th>
    <th>Body</th>
    <th>Date</th>
</tr>

编辑：这是我的HTML：

<table id="blogTable">
<tr>
    <th>Name</th>
    <th>Body</th>
    <th>Date</th>
</tr>

如果我将插入更改为：

插入+ = '<td>' + item.Name + '</td><td>' + item.Body + '</td><td>' + item.DateCreated + '</td>';

然后我运行网站时的innerhtml输出是：

<tbody><tr>
    <th>Name</th>
    <th>Body</th>
    <th>Date</th>
</tr>
</tbody>
 <td>derper</td><td>testtat</td><td>/Date(1301692095627)/</td>
 <td>derper</td><td>tesateat</td><td>/Date(1301692093497)/</td>
 <td>derper</td><td>testest</td><td>/Date(1301692091527)/</td>
 <td>derper</td><td>derprperp</td><td>/Date(1301692082100)/</td>

所以我的问题是当我尝试添加新行时，它们不会显示，但是当我只使用单元格（<td>）时，它们会显示出来。如何在<tr>？

中添加新的<tbody>

Answer 1

到目前为止，您发布的代码有效。请参阅：jsfiddle.net/SQVz6/。

使用Firebug，检查表：blogTable。（右键单击表格通常会在上下文菜单中显示Firebug的“Inspect”工具。）

Inspecting the table source using Firebug.

~~~~~~~
桌面结构是否正确？
右键单击检查器中的<table id="blogTable">，然后单击Copy innerHTML
将结果粘贴到上面的问题中。

Answer 2

尝试将.append()更改为.appendTo()？

Answer 3

在尝试找出解决方案的几个小时之后，我将insert语句更改为：

 $('#blogTable tr:last').after(insert);

现在可以使用了。 innerHTML输出如下：

<tbody>
<tr>
    <th>Name</th>
    <th>Body</th>
    <th>Date</th>
</tr>
<tr>
    <td>derper</td>
    <td>testtat</td>
    <td>/Date(1301692095627)/</td>
</tr>
<tr>
    <td>derper</td>
    <td>tesateat</td>
    <td>/Date(1301692093497)/</td>
</tr>
<tr>
    <td>derper</td>
    <td>testest</td>
    <td>/Date(1301692091527)/</td>
</tr>
<tr>
    <td>derper</td>
    <td>derprperp</td>
    <td>/Date(1301692082100)/</td>
</tr>
</tbody>

来自AJAX脚本的JSON数据未出现在HTML表中

3 个答案: