만들기 테이블 동적으로 jQuery를

Question

나는 동적으로 jQuery를 사용하여 일부 <table> 데이터를 짓고 있어요,하지만 난 다음 오류 받고 있어요에 : 이것은 다음과 같습니다 스크립트의 appendTo 부분에서 발생

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

:

를 $tbody가 $('<tbody />');

이

사람이 제발 도와 줄래입니다

$('<tr />').append(
    /* lots of stuff */ 
).add(
$('<tr />') 
).append(
    /* some more */ 
).appendTo($tbody); 

? 완벽을 기하기 위해 전체 코드는 다음과 같습니다.

$('#visitsContainer').show(); 

$div = $('<div />').css('margin-top', '7px').css('width', '620px').addClass('groupBox'); 
$table = $('<table />').attr('cellpadding', '3').attr('cellspacing', '0').attr('width', '620'); 
$tbody = $('<tbody />'); 
$('<tr />').append(
    $('<td />').css('width', '45px').attr('valign', 'top').attr('rowspan', '3').attr('align', 'center').append(
     $('<a />').attr('href', '/sparkx/' + userData.username).append(
       $('<img />').attr('src', '/media/profile/40px/' + userData.photo).attr('alt', userData.firstname).attr('border', '1').css('border-color', '#c0c0c0').css('max-width', ' 42px').css('max-height', ' 40px') 
     ) 
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('border-right', '1px dotted #D21C5B').css('width', '200px').append(
     $('<a />').attr('href', '/sparkx/' + userData.username).append(
      $('<strong />').text(userData.fullname) 
     ).add(
      $('<br />') 
     ).add(
      userData.city) 
     ) 
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '110px').append(
     $('<a />').attr('href', '/profile/' + userData.username + '/sendpm').css('line-height', '18px').append(
      $('<img />').attr('src', '/templates/front/default/images/send_new_icon.gif').attr('alt', 'Stuur bericht').attr('border', '0').attr('align', 'left').css('margin-right', '5px') 
     ).append(
      'Stuur bericht') 
     ) 
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '170px').append(
     $('<b />').text(
      'Geplaatst op:') 
     ).append(
      ' ' + posted 
     ) 
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '135px').append(
     (month > 0 ? 
      $('<b />').text('Was hier:') 
      : 
      $('<div />').css('width', '1px').html('&nbsp;') 
     )).append(month > 0 ? ' ' + months[month] + ' ' + year : '') 
    ) 
).add(
    (rating > 0 ? 
     $('<tr />').append(
      $('<td />').attr('colspan', '4').append(
       $('<strong />').css('color', '#D21C5B').text(userData.firstname + ' vond dit ').append(
        (rating == 3 ? 
         $('<i />').text('een aanrader ').add(
         $('<img />').attr('src', '/templates/front/default/images/thumbGood.png').attr('alt', 'Goed').attr('height', '16').css('margin-left', '3px') 
         ) 
        : (rating == 2 ? 
         $('<i />').text('een aanrader ').add(
         $('<img />').attr('src', '/templates/front/default/images/thumbAvg.png').attr('alt', 'Redelijk').attr('height', '16').css('margin-left', '3px') 
         ) 
        : 
         $('<i />').text('slecht ').add(
         $('<img />').attr('src', '/templates/front/default/images/thumbBad.png').attr('alt', 'Slecht').attr('height', '16').css('margin-left', '3px') 
         ) 
        )) 
       ) 
      ) 
     ) 
    : '') 
).add(
    (content ? 
     $('<tr />').append(
      $('<td />').attr('colspan', '4').append(
       $('<div />').css('width', '100%').text(content).add(
       $('<div />').css('float', 'right').css('clear', 'both').append(
        $('<a />').attr('href', '/guide/editreaction/' + id).append(
         $('<b />').text('edit') 
        ).add(
        $('<a />').attr('href', thisURL + '/rr/' + id).css('padding-left', '10px').append(
         $('<b />').text('delete') 
        )) 
       )) 
      ) 
     ) 
    : '') 
).appendTo($tbody); 
$tbody.appendTo($table); 

$table.appendTo($div); 
$div.prependTo($('#visits')); 

Answer 1

나는 당신의 행동을 심각하게 재검토합니다. 스크립트 대량은 유지 보수가 불가능 해지고 디버깅하기가 어려울 것입니다. 이 모든 마크 업 생성 서버 측을 수행하고 아약스를 사용하여 dom에로드 할 수 있습니까?

현재로서는 성능 문제가 발생하는 경우가 있습니다. 특히 많은 양의 데이터가있는 경우 특히 그렇습니다. 여러 jquery dom 객체를 만들고 여러 개의 추가 작업을 수행하고 있습니다. 문자열을 만들거나 배열에 푸시하고 dom에 한 번만 추가하는 것이 좋습니다. 추가 할 때마다 값이 비싼 다시 그리기가 발생합니다.

왜 dom creation 전용 플러그인을 사용하여 js를 더 읽기 쉽게 만들어야하지 않습니까?

또 다른 옵션은 jTemplates입니다.이 옵션을 사용하면 js 외부에서 마크 업을 정의한 다음 표시 할 데이터를 전달할 수 있습니다.

시도하고 테스트 한 그리드 플러그인 중 하나를 사용하여 효율적으로 테이블 구조를 만들 수도 있습니다. Google jqgrid 또는 flexigrid.