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

Question

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

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

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

如果您看到图像右侧有刻度线的部分。在刻度线后，该部分移动到右侧。这种情况发生在我输入代码以显示/隐藏额外功能时..这个问题的解决方案是什么？

Answer 1

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

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

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

Answer 2

该页面似乎在IE8中正确显示。在Chrome和FF中，问题是表格中的display: block元素会导致表格错误地显示如果有没有 display: block的元素好。

是一个解决方案

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

Answer 3

你有什么问题吗？

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