Tabellenerstellung mit jquery dauert zu lange

[molily]

Hallo,

var mytablebody = $("#tablebody");

mytablebody.append("<tr></tr>");
mylastrow = $(mytablebody).filter(:last);

mylastrow.append("<td>" + "Danke fuer den Schubser!" + "</td>");

  
Das ist ein wenig von hinten durch die Brust ins Auge, also sehr ineffizient. Erst erzeugst du ein Element und hängst es ins DOM, dann suchst du es aufwändig wieder heraus.  
  
Übrigens wird `$(mytablebody).filter(:last)`{:.language-javascript} nur einen Syntaxfehler werfen, auch `$(mytablebody).filter(':last')`{:.language-javascript} wird nicht das korrekte tun. Wenn schon, dann `mytablebody.find('tr:last')`{:.language-javascript} (finde das letzte tr-Element im Table-Body).  
  
So geht es effizienter:  
  
~~~javascript
var tbody = $('#tablebody');  
var tr = $('<tr>'); // Erzeuge Element und speichere das jQuery-Objekt mit dem Element in einer Variable  
tr.append('<td>Inhalt</td>'); // Hänge Inhalt an. Wenn das Element noch nicht im DOM hängt, ist das viel performanter  
tr.appendTo(tbody); // Erst dann hänge da tr-Element ins DOM

Wenn du tausende tr-Elemente erzeugst, solltest du sie nicht einzeln ins DOM einhängen, sondern in einem Rutsch. Dazu kannst du ein neues tbody-Element erzeugen, an das du nach und nach die tr-Elemente appendest. Oder einen einfachen Array, in den du die tr-Elemente pusht, und den du am Ende an tbody.append(array) übergibst.

var elements = [];  
for (var i = 0, l = 1000; i < l; i++) {  
  var tr = $('<tr>').append('<td>…</td>');  
  elements.push(tr);  
}  
$('#tablebody').append(elements);

Mathias