Det här är inte alltför svårt. Det enkla sättet skulle vara att lägga till via .append:
$( '#table > tbody:last').append('<tr id="id"><td>stuff</td></tr>');
Att lägga till element i realtid är inte helt möjligt. Du måste köra en Ajax-fråga som uppdateras i en loop för att "fånga" förändringen. Så, inte helt i realtid, men väldigt, väldigt nära det. Din användare skulle verkligen inte märka skillnaden, även om din servers belastning kanske.
Men om du ska engagera dig mer, skulle jag föreslå att du tittar på DataTables . Det ger dig en hel del nya funktioner, inklusive sortering, personsökning, filtrering, begränsning, sökning och ajax-laddning. Därifrån kan du antingen lägga till ett element via ajax och uppdatera tabellvyn, eller helt enkelt lägga till via dess API. Jag har använt DataTables i min app ett tag nu och de har konsekvent nämnts som funktionen nummer 1 som gör den enorma mängden data användbar.
--Redigera --
Eftersom det inte är självklart, för att uppdatera den datatabell du anropar, ställ in ditt datatabellanrop till en variabel:
var oTable = $('#selector').dataTable();
Kör sedan detta för att göra uppdateringen:
oTable.fnDraw(false);
UPPDATERING -- 5 år senare, februari 2016:Detta är mycket mer möjligt idag än det var 2011. Nya Javascript-ramverk som Backbone.js kan ansluta direkt till databasen och utlösa ändringar av UI-element inklusive tabeller om ändring, uppdatering eller radering av data....det är en av dessa ramverks främsta fördelar. Dessutom kan användargränssnitt matas med realtidsuppdateringar via socket-anslutningar till en webbtjänst, som också sedan kan fångas upp och åtgärdas. Även om tekniken som beskrivs här fortfarande fungerar, finns det mycket mer "live" sätt att göra saker på idag.