How to embed tables in a div or something else without breaking jQuery fadeIn function?

Question

I have a very specific problem.

I would like to insert specific code using the fadeIn, fadeOut functions, but it does not work if I use the tr and td tags embedded in the div tag.

I have this code for the JS part:

var registrationPart = $('div.registration-part'); var loginPart = $('div.login-part'); $('span.logreg.log').click ( function () { registrationPart.fadeOut("fast"); loginPart.fadeIn("slow"); } 

And this is in html:

 <table class="table"> <div class="registration-part"> <tr> <td>registration</td> </tr> </div> <div class="login-part"> <tr> <td>login</td> </tr> </div> </table> 

So fadeIn, fadeOut does not work if there is a td tag inside the div. If I replace them with a div or span, everything will be fine.

Is there a way to leave tr, td, so I don’t need to create special stylesheets for the div, so it will look like tr, td.

Thanks in advance.

Answer 1

You have invalid HTML , so it does not show how you expect this. You cannot put a <div> inside a <table> and contain <tr> elements; you can include a <div> inside the <td> element, but that really will not help you.

If you want to define individual sections of a table, use the <tbody> :

HTML

 <table class="table"> <tbody class="registration-part"> <tr> <td>registration</td> </tr> </tbody> <tbody class="login-part"> <tr> <td>login</td> </tr> </tbody> </table> 

Javascript

 var registrationPart = $('tbody.registration-part'); var loginPart = $('tbody.login-part'); $('span.logreg.log').click ( function () { registrationPart.fadeOut("fast"); loginPart.fadeIn("slow"); } 

If you look at this jsFiddle with the HTML source and view the table with Firebug, you will notice that the <div> elements are in front of the table and empty, and do not include the rows you wanted.

Answer 2

Place the div inside the table cell. See here http://css-tricks.com/using-divs-inside-tables/

Answer 3

Why are you using <div> tags inside your table? Instead, you should use the <tr> tags.

Please try this script here.

A good day

Answer 4

 $('#selector').click(function () { $('.registration-part').parent().find('td:first').fadeOut('fast'); $('.login-part').parent().find('td:last').fadeIn('slow'); });