CODEWITHSUNDEEP
jquerydynamic
Hacker
Hacker

Reputation: 7906

How to dynamically show/hide rows in a table

I'm working on a website where I need to show/hide table rows. I got the feature working, but the CSS gets bad when I do show. I'm providing a working link; click the 'More...' link and see the action for an example. I'm using jQuery's toggle(slow) for hiding and showing

I have a page built using tables:

http://ratingscorner.com/product_rating.php?alias=Rashtreeya-Vidyalaya-College-of-Engineering-Mysore-Road-Bangalore&product=colleges

If you see the section right side of image where the tick marks are there. After the tick mark the section moves to right hand side. This happened when I did put a code to show/hide the extra features.. any solution for this problem?

Upvotes: 0

Views: 2076

Answers (3)

Jawa
Jawa

Reputation: 2332

The page seems to display correctly in IE8. In Chrome and in FF the problem is that display: block elements inside a table make the browser render the table wrong if there are elements without display: block as well. A solution is either to

  • set display: block to the first tbody element already (this is far the easiest solution)
  • remove the display: none from the .extra_properties when showing the extra rows (and leaving the display: block off as well) or
  • set display: table-row-group when showing. It's to be noted, that display-row-group doesn't work in IE, though.

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272106

OK, I found the problem. You have two tbody tags in the table. This is correct. However, when you use jQuery to show/hide the table, it applies a display: block attribute to the tbody tag which causes browser to render it incorrectly.

Use jQuery to change the display CSS attribute as follows:

  • set display: none to hide the "more properties" section
  • set display: table-row-group to show the "more properties" section
  • OR set display to empty string to let browser show the section the way it should be

Upvotes: 3

Germán Rodríguez
Germán Rodríguez

Reputation: 4288

what problems are you having?

$("tr").click(function() { $(this).hide(); }
$("#showmore").click(function() { $("#tr:hidden").show() }

Upvotes: -1

Related Questions