Actually, Mark's use of 'first-child' is correct. ':first-child' is used to indicate the the element is the first-child its parent, not the parent element's first-child. The tr has a class of .ajax, and since it's prepended to the tbody, it is the first-child of the tbody, so the correct selector to get it would in fact be '.ajax:first- child'; you could also use '#recent_activity tbody tr:first-child' which means the same thing.
The problem you're having with the display once you call the slideDown () and fadeIn() functions is that they apply a style of 'display:block' to the table row, which results in the td not spanning other table cells like you'd expect. You need to put a div inside the td and use the slideDown() and fadeIn() functions on that. If you want a very 'jQuery' chaining approach, try this: $('<div>').css('display','none').text('Testing this func').appendTo($ ('<td>').attr('colspan','7').appendTo($('<tr>').prependTo ('#recent_activity tbody'))).slideDown('slow').fadeIn('slow'); On Feb 12, 6:51 pm, James <james.gp....@gmail.com> wrote: > That's probably because you're using the "first-child" of the <tr>, > which is just the first <td>. > Maybe you intended to do: > $(".ajax").slideDown('slow') > ? > > I'm not sure of its effects for a tr though compared to a div. > > On Feb 12, 4:43 pm, Mark Steudel <msteu...@gmail.com> wrote: > > > I have a table that is setup with a tbody tag. > > > If I run the following: > > > $("#recent_activity tbody").prepend( '<tr class="ajax"><td > > colspan="7">Testing this func</td></tr>' ); > > > I get a new row spanning 7 columns > > > If I prepend this: > > $("#recent_activity tbody").prepend( '<tr style="display:none" > > class="ajax"><td colspan="7">Testing this func</td></tr>' ); > > > Then try to show it, with something like: > > $(".ajax:first-child").slideDown('slow').fadeIn('slow'); > > > I only get the first cell showing up. Why does this happen?