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

我正在一个我需要显示/隐藏表格行的网站上工作。 我得到了这个function，但是当我显示时，CSS会变坏。 我正在提供一个工作链接 ; 单击“更多…”链接并查看示例的操作。 我正在使用jQuery的toggle(slow)来隐藏和显示

我有一个使用表格构建的页面：

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

如果您看到图像右侧有刻度标记的部分。 在刻度线后，该部分移动到右侧。 这发生在我确实放了一个代码来显示/隐藏额外的function..这个问题的任何解决方案？

Answer 1

该页面似乎在IE8中正确显示。 在Chrome和FF中，问题是display: block table元素内的display: block元素会使得如果有没有 display: block元素，浏览器会将表格呈现错误。 解决方案是要么

• set display: block到第一个tbody元素（这是最简单的解决方案）
• display: none额外的行时，从.extra_properties删除display: none （并且.extra_properties display: block off）或
• display: table-row-group设置display: table-row-group 。 需要注意的是， display-row-group在IE中不起作用。

Answer 2

好的，我发现了问题。 表中有两个tbody标签。 这是对的。 但是，当您使用jQuery显示/隐藏表时，它会将display: block属性应用于tbody标记，这会导致浏览器错误地呈现它。

使用jQuery更改显示CSS属性，如下所示：

• set display: none隐藏“更多属性”部分
• set display: table-row-group显示“更多属性”部分
• 或者将display设置为空字符串，让浏览器按照应该的方式显示该部分

Answer 3

你有什么问题？

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