Not really, the problem is making the table rows or cells display:block. I suggest playing around with the markup and CSS using block element for the header, to get it to look how you want, then add the behavior after.
On Feb 13, 11:15 am, Mark Steudel <[email protected]> wrote: > 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 <[email protected]> wrote: > > > That should read "..first-child of its parent,.." in the first > > sentence > > > On Feb 12, 11:33 pm, mkmanning <[email protected]> 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 <[email protected]> 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 <[email protected]> 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?
