Данные JSON из скрипта AJAX не отображаются в таблице HTML

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"}
]

РЕДАКТИРОВАТЬ: вставка InnerHTML из FireBug

<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>

Если я изменю свою вставку на эту:

insert + = '<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

Попробуйте изменить .append() на .appendTo()?

Answer 2

после многих часов попыток найти решение, я изменил оператор вставки так:

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

Answer 3

Код, который вы разместили, пока работает. См .: jsfiddle.net / SQVz6 / .

Используя Firebug, осмотрите таблицу: blogTable. (При щелчке правой кнопкой мыши по таблице в контекстном меню Firebug появляется инструмент «Проверка».)

~~~~~~~
Структура таблицы выглядит правильно?
Щелкните правой кнопкой мыши на <table id="blogTable"> в инспекторе, а затем нажмите Copy innerHTML
Вставьте результаты в свой вопрос выше.