如何动态显示/隐藏表中的行

问题描述：

我在一个需要显示/隐藏表行的网站上工作.我可以使用该功能，但是在显示时CSS变得不好了.我正在提供一个工作链接；点击更多..."链接，然后查看操作示例.我正在使用jQuery的toggle(slow)隐藏和显示

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?

答

该页面似乎在IE8中正确显示.在Chrome和FF中，问题在于表中的display: block元素使浏览器将表错误渲染为，同时还有元素 without display: block.一个解决方案是

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

已经将display: block设置为第一个tbody元素(这是最简单的解决方案)
在显示多余的行时将display: none从.extra_properties中删除(同时也将display: block保留为关闭状态)或
设置display: table-row-group.需要注意的是，display-row-group在IE中不起作用.

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.

如何动态显示/隐藏表中的行

相关推荐