Follow up question, if I instead wanted to use multiple table cells instead of one big colspan, is there a way to do this same sort of thing without a div?
On Feb 12, 11:35 pm, mkmanning <michaell...@gmail.com> wrote: > That should read "..first-child of its parent,.." in the first > sentence > > On Feb 12, 11:33 pm, mkmanning <michaell...@gmail.com> wrote: > > > 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?