jQuery :FadeOut not working with table Rows

Answer 1

Whilst Jab's solution is a the way round the problem it does contain a bug. Specifically your callback function to remove the parent element is going to fire once for every 'td' element in that row, when really it should only fire once for the last one. This can be demonstrated by putting an alert call into the callback, which will be seen once for every td in the row.

I have yet to find a really neat way around this but I ended up with something along the lines of this:

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)
        }
    });
}

To call this you would use something like this:

ShowHideTableRow("#MyTableRowId",false,function() { // do something else ONCE when the row is hidden or shown... });

NOTE: My version does not remove the row from the dom because I just want to hide/show it but it should be fairly easy to adapt.