Erstellen von Tabellen dynamisch in jQuery

Question

Ich baue einige <table> Daten dynamisch mit jQuery, aber ich bin immer folgende Fehlermeldung:

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

Das am appendTo Teil eines Skripts geschieht das wie folgt aussieht:

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

Wo $tbody ist $('<tbody />');

jemand kann mir helfen bitte? Der Vollständigkeit halber ist dies der gesamte Code:

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

Ich würde ernsthaft überdenken, was Sie tun. Die Masse des Skripts wird unwartbar und ernsthaft schwer zu debuggen. Können Sie nicht all diese Markup-Erstellung Server-Seite tun und Ajax verwenden, um es in die Dom laden.

Die Art und Weise, wie Sie es im Moment haben, wird auch auf Leistungsprobleme stoßen, besonders wenn Sie eine große Menge von Daten haben. Sie erstellen mehrere jquery-dom-Objekte und führen mehrere Anhängen aus. Es ist besser, eine Zeichenfolge zu erstellen oder auf ein Array zu schieben und nur einmal an die Domäne anzuhängen. Jedes Anhängen verursacht ein Neuzeichnen, das teuer ist.

Aus diesem Grund verwenden Sie kein dediziertes dom creation Plugin, um Ihre js besser lesbar zu machen.

Eine andere Möglichkeit ist es, jTemplates zu betrachten, mit der Sie das Markup außerhalb der js definieren und dann die anzuzeigenden Daten übergeben können.

Sie können auch eines der erprobten Grid Plugins in Betracht ziehen und effizient die Tabellenstruktur für Sie erstellen. Google jqgrid oder flexigrid