Auto-update table with jQuery

[Asheeown]

I'm working on a new project and this is a feature I've always wanted to implement.  An auto-updating activity table.  It will be shown at the top of each member page to show new 'posts' or whatever and it will refresh say every 10 seconds.

 

I wanted to have records fade out on the bottom as new ones faded in.  I can fade in and fade out records, I can also create new rows in the table with data coming from the ajax php request.

 

For fading the table rows I use the following code:

function ShowHideTableRow(rowSelector, show, callback)
{
    var childCellsSelector = $(rowSelector).children("td");
    var ubound = childCellsSelector.length - 1;
    var lastCallback = null;

    childCellsSelector.each(function(i)
    {
        // Only execute the callback on the last element.
        if (ubound == i)
            lastCallback = callback

        if (show)
        {
            $(this).fadeIn("slow", lastCallback)
        }
        else
        {
            $(this).fadeOut("slow", lastCallback)
        }
    });
}

and to execute:

ShowHideTableRow("#" + tbl.rows[6].id,false,function() { 
   
});

That would hide row 6 in 'tbl'.

 

Thing is I'm severely confused.  I'm not sure how to maintain a list of whats supposed to be there, or what gets switched out, what stays, what fades.  I've just been butchering everything I code and I've been stuck for three days.

 

If anyone else has done this could they point me in the direction of the code they used or the techniques they used to code it.