Dit is niet zo moeilijk. De eenvoudige manier zou zijn om toe te voegen via .append:
$( '#table > tbody:last').append('<tr id="id"><td>stuff</td></tr>');
Realtime elementen toevoegen is niet helemaal mogelijk. U zou een Ajax-query moeten uitvoeren die in een lus wordt bijgewerkt om de wijziging te "vangen". Dus niet helemaal realtime, maar heel, heel dichtbij. Uw gebruiker zou het verschil niet echt merken, hoewel de belasting van uw server dat wel zou kunnen zijn.
Maar als u meer betrokken wilt raken, raad ik u aan te kijken naar DataTables . Het geeft je een flink aantal nieuwe functies, waaronder sorteren, pagineren, filteren, beperken, zoeken en ajax-laden. Van daaruit kun je een element toevoegen via ajax en de tabelweergave vernieuwen, of gewoon toevoegen via de API. Ik gebruik DataTables al een tijdje in mijn app en ze worden consequent genoemd als de nummer 1 functie die de enorme hoeveelheid gegevens bruikbaar maakt.
--Bewerken --
Omdat het niet voor de hand ligt, moet u om de DataTable die u aanroept bij te werken uw Datatables-aanroep instellen op een variabele:
var oTable = $('#selector').dataTable();
Voer dit vervolgens uit om de update uit te voeren:
oTable.fnDraw(false);
UPDATE -- 5 jaar later, februari 2016:dit is tegenwoordig veel meer mogelijk dan in 2011. Nieuwe Javascript-frameworks zoals Backbone.js kunnen rechtstreeks verbinding maken met de database en wijzigingen in UI-elementen activeren, inclusief tabellen over wijziging, update of verwijderen van gegevens .... het is een van de belangrijkste voordelen van dit raamwerk. Bovendien kunnen UI's via socketverbindingen in realtime worden bijgewerkt met een webservice, die vervolgens kan worden opgevangen en opgevolgd. Hoewel de hier beschreven techniek nog steeds werkt, zijn er tegenwoordig veel meer "live" manieren om dingen te doen.