Проблема с вставкой строки, содержащей строки таблицы html (извлеченной jquery ajax) в таблицу html - странный беспорядок элементов?

Question

Я пытаюсь загружать контент веб-страницы понемногу, поскольку пользователь прокручивает его, поскольку контент огромен, и пользователь обычно интересуется только первой его частью.

Страница состоит из большой таблицы.Каждый раз, когда пользователь прокручивает страницу до конца, я использую ajax еще несколько строк и добавляю их в таблицу.Или я хочу, чтобы это работало таким образом ...

Мой скроллинг-событие работает как надо.Запрос AJAX отправляется, как и должно быть, и я получаю данные, как предполагалось.Проблема начинается, когда я хочу добавить эти данные в таблицу.

Допустим, мой ответ на запрос ajax (в моем скрипте называемый 'data') представляет собой следующую строку:

'<tr class="tasklist" id="r11">
   <td class="titlecell">Some kind of string title</td>
   <td>Some kind of string</td>
 </tr>
 <tr class="tasklist" id="r12">
   <td class="titlecell">Some other kind of string title</td>
   <td>Some other kind of string</td>
 </tr>'

Затем я пытаюсь использовать .after (данные), чтобы добавить эти строки в мою таблицу.Только на веб-странице эти строки по какой-то странной причине вставляются в таблицу следующим образом:

'<tr>
   <td class="titlecell"></td>
   <td></td>
 </tr>
 <tr class="tasklist" id="r11"></tr>
 <tr>
   <td class="titlecell"></td>
   <td></td>
 </tr>
 <tr class="tasklist" id="r12"></tr>'

Нет содержимого ячейки вообще, а ячейки вставляются в дополнительные строки, оставляя «исходные» строки пустыми.Не совсем то, что я хотел, верно?Но почему?Любой из вас, веб-оракулы, которые могут снова поставить меня на мой путь, объяснив, что я делаю неправильно или как должно выглядеть лучшее (рабочее) решение, я был бы очень благодарен!

Этомоя функция JavaScript, как она выглядит сейчас:

SPECIAL.loadMyTaskList = function() { 
  // to avoid multiple simultaneous function calls
  if ($('div #loader').html().trim() == '') {
    var last = $("#mytasklist .tasklist:last").attr("id");
    last = last.substring(1); // row id is on format r[number]
    $('div #loader').html('<img src="images/loading.gif" alt="Wait..."> Loading more tasks');
    $.get('includes/mytasklist.php?from='+last+'&nbr=10&ajax=1', function(data) {
      if (data=='')
        // all data is already loaded
        $(window).unbind('scroll'); 
      else 
        // append to table #mytasklist, after 
        // the last row (with class tasklist)
        $("#mytasklist .tasklist:last").after(data);
      // if browser window is so large, that the first 
      // post(s) of data fits without creating a scrollbar
      if (!BASIC.pageHasScrollbar())  
        SPECIAL.loadMyTaskList();
      $('div #loader').empty();
    });
  }
}

Answer 1

Я наконец нашел ответ на проблему сам. Это не было проблемой с кодом выше. Проблема заключалась в том, что мой файл jquery был поврежден (но все еще действительный код, поэтому firebug его не уловил). Я подозреваю, что виновником был не очень продуманный поиск-замена-1001 *

Answer 2

попробуйте этот код, вместо after используйте append -

 $("#mytasklist").append(data);

, если в вашей таблице tbody, попробуйте это -

$("#mytasklist > tbody").append(data);