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?

Reply via email to