html 테이블에 문자열을 삽입하는 데 문제가 있습니다 (jquery ajax에서 가져옴) - html 테이블에 이상한 요소가 있습니까?

Question

콘텐츠가 거대하고 사용자가 대개 첫 번째 부분에만 관심이 있기 때문에 사용자가 스크롤 할 때 웹 페이지 콘텐츠를 조금씩로드하려고합니다.

페이지가 큰 테이블로 구성되어 있습니다. 사용자가 페이지의 맨 아래로 스크롤 할 때마다 아약스를 사용하여 테이블에 몇 줄을 더 추가합니다. 또는, 그 방법으로 작동하고 싶습니다 ...

내 스크롤링 이벤트가 제대로 작동합니다. 아약스 요청은 예상 한대로 전송되며 데이터를 의도 한대로 가져옵니다. 이 데이터를 테이블에 추가하려고하면 문제가 시작됩니다.

의가 (내 스크립트에 '데이터'라고도 함) 아약스 요청에 대한 내 대답은이 같은 문자열입니다 가정 해 봅시다 :

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

가 그럼 난에 그 행을 추가 할 (데이터) 후론 사용하려고 내 표. 전용 웹 페이지에서 어떤 이상한 이유로 전면 해당 행은 다음과 같이 테이블에 삽입 :

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

전혀 셀 내용, 그리고 세포가 여분의 행에 삽입되어, 빈 "원래"행을 떠나. 내가 원했던 것이 실제로는 아니 었던가? 하지만 왜? 당신이 잘못한 것을 설명하거나 더 나은 (작동하는) 솔루션이 어떻게 보이는지에 대한 설명을 통해 웹 사이트를 다시 내 트랙에 다시 올려 놓을 수있는 웹 오라클 중 누구라도 정말 감사 할 것입니다. 그것이 지금 보이는

이 내 자바 스크립트 함수입니다 :

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 파일이 손상되었다는 것입니다 (하지만 여전히 유효한 코드이므로 방화범이 그것을 잡지 못했습니다). 나는 search-n-replace를 통해 그렇게 생각하지 않는 것이 범인이라고 의심한다.

Answer 2

이 코드를 시도 대신 after 사용의 append -

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

당신이 다음이 시도 테이블에서 tbody가있는 경우 -

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