Det her er ikke for svært. Den enkle måde ville være at tilføje via .append:
$( '#table > tbody:last').append('<tr id="id"><td>stuff</td></tr>');
Tilføjelse af elementer i realtid er ikke helt muligt. Du skal køre en Ajax-forespørgsel, der opdateres i en løkke for at "fange" ændringen. Altså ikke helt i realtid, men meget, meget tæt på det. Din bruger ville virkelig ikke bemærke forskellen, selvom din servers belastning måske.
Men hvis du vil involvere dig mere, vil jeg foreslå at se på DataTables . Det giver dig en hel del nye funktioner, herunder sortering, sidesøgning, filtrering, begrænsning, søgning og ajax-indlæsning. Derfra kan du enten tilføje et element via ajax og opdatere tabelvisningen eller blot tilføje det via dets API. Jeg har brugt DataTables i min app i nogen tid nu, og de er konsekvent blevet nævnt som den første funktion, der gør den enorme mængde data brugbar.
--Rediger --
Fordi det ikke er indlysende, for at opdatere den DataTable, du kalder, skal du indstille dit Datatables-kald til en variabel:
var oTable = $('#selector').dataTable();
Kør derefter dette for at udføre opdateringen:
oTable.fnDraw(false);
OPDATERING -- 5 år senere, feb 2016:Dette er meget mere muligt i dag, end det var i 2011. Nye Javascript-frameworks såsom Backbone.js kan oprette forbindelse direkte til databasen og udløse ændringer på UI-elementer, herunder tabeller om ændring, opdatering eller sletning af data....det er en af disse rammers primære fordele. Derudover kan UI'er tilføres realtidsopdateringer via socketforbindelser til en webservice, som også derefter kan fanges og reageres på. Selvom den her beskrevne teknik stadig virker, er der langt flere "live" måder at gøre tingene på i dag.