分享程序员开发的那些事...
更新时间：2023-12-05 15:06:04
ea ******* @ gmail.com 写道：
ea*******@gmail.com wrote:
我有一个小脚本加载一个包含一些元素的表visiblity =
hidden和display = none。点击链接时，它会打开。
隐藏表格元素。再次点击该链接时，它会隐藏该链接。
元素。
现在这可以在IE中使用，但在FireFox中元素打开。但是当你再次点击它来隐藏时单元格中的文本消失了，但实际元素本身并没有消失。留下一个很大的空白。
I have a small script that loads a table with some elements visiblity =
hidden and display = none. When clicking on the link it "opens" the
hidden table elements. When click on the link again it "hides" the
elements.
Now this works dandy in IE but in FireFox the element "opens" but when
you click on it again to "hide" the text in the cell disappears but the
actual element itself does not "dissappear" leaving a big blank space.
首先，如果您切换CSS显示属性以显示/隐藏
元素，那么根本不需要切换CSS能见度
属性。您可以单独保持可见性并简单地切换显示。
然后剩下的问题是CSS 2定义了各种可能的
显示值，对于像HTML tr元素这样的表行元素
''table-row''是正确的值，而不是''block''。只有IE直到版本6
不支持。
只要你使用内联样式，解决方案很简单：
隐藏设置例如
elementObject.style.display =''none'';
显示它足以完成
elementObject.style.display = '''';
-
Martin Honnen
http://JavaScript.FAQTs.com/
ea ******* @ gmail.com 写道：
ea*******@gmail.com wrote:
我有一个小脚本加载一个表格，其中包含一些元素visiblity =
hidden和display = none。点击链接时，它会打开。
隐藏表格元素。再次点击该链接时，它会隐藏该链接。
元素。
I have a small script that loads a table with some elements visiblity =
hidden and display = none. When clicking on the link it "opens" the
hidden table elements. When click on the link again it "hides" the
elements.
嗨厄尔，
我玩你的例子，并认为我发现了问题。您正在使用
display =" block"对于表格行，它应该是display =" table-row"。
你不需要切换显示和显示。和能见度。只需切换
" display"应该没事。如果您想切换可见性你也可以这样做，但是它也没有什么区别。
嵌套表格很吓人，可能没必要。
return false;我添加了make，所以点击链接后URL没有'＃''
下面调整后的例子。
-Peter
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN"
" http://www.w3.org/TR/html4/loose.dtd">
< html>
< head>
< Meta Http-Equiv =" Content-Type" Content =" text / html;
charset = iso-8859-1">
< titleblah-blah< / title>
< script type =" text / javascript">
函数changeView（objChange）{
var el = document。 getElementById（objChange）
if（el）{
if（el.style.display.toLowerCase（）！==''none''）{
el.style.display =" none" ;;
} else {
el.style.display =" table-row" ;;
//只要在
a css文件等中没有设置显示样式，这也是有效的
//el.style.display ="" ;;
}
}
}
< / script>
< / head>
< body>
< p>
点击LINK它在IE中工作Netscape但不是Fox。
窗口不显示：none和visibility：hidden
在Firefox中通过点击视图比较IE和Firefox
在两个浏览器中多次按钮
< / p>
< table width =" 100％"边界=" 0" CELLSPACING = QUOT; 2英寸cellpadding =" 0"
id =" clickTbl">
< tr>
< td> Bill Gordon< / td>
< td>等待批准< / td>
< td>待定< / td>
< td>待定< ; / td>
< td>< a href ="＃" onClick =" changeView（''notes''）;返回
false;">查看< / a>< / td>
< / tr> ;
< tr id =" notes" style =" display：none">
< td colspan =" 5" bgcolor ="＃993399">
< p> some tesa safd asfd asddfdasdf
fasd fasfd as dfas df asdf asdf asdf asdf asdf asdf asdf asdf asdf
asdf asd asdfasda< / p>
< p> asdasdfasdf< / p>
< p> asdf< / p>
< p> a< / p>
< p> sdf< / p>
< / td>
< / tr>
< tr>
< td> Brenda Hudson< / td>
< td>正在审核< / td>
< td>待定< / td>
< td>待定< / td>
< td>单元格不相关< / td>
< / tr>
< / table>
< / body>
< / html>
Hi Earl,
I played with your example and think i found the problem. You are using
display="block" for a table row when it should be display="table-row".
You don''t need to toggle both "display" and "visibility. Just toggling
"display" should be fine. If you want to toggle "visibility" you can do
that too but it shouldn''t make a difference.
Nested tables are scary and probably not necessary.
The "return false;" I added makes it so the URL doesn''t have a ''#''
after clicking the link
Adjusted example below.
-Peter
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta Http-Equiv="Content-Type" Content="text/html;
charset=iso-8859-1">
<titleblah-blah </title>
<script type="text/javascript">
function changeView(objChange){
var el = document.getElementById(objChange)
if (el){
if (el.style.display.toLowerCase() !== ''none''){
el.style.display = "none";
} else {
el.style.display = "table-row";
// this works too as long as the display style is not set in
a css file etc
//el.style.display = "";
}
}
}
</script>
</head>
<body>
<p>
Click on the LINK Its works in IE and Netscape but not Fox.
The window does not go to display:none and visibility:hidden
In Firefox compare IE and Firefox by clicking on the view
button multiple times in both browsers
</p>
<table width="100%" border="0" cellspacing="2" cellpadding="0"
id="clickTbl">
<tr>
<td>Bill Gordon</td>
<td>Awaiting Approval</td>
<td>Pending</td>
<td>Pending</td>
<td><a href="#" onClick="changeView(''notes'');return
false;">View</a></td>
</tr>
<tr id="notes" style="display:none">
<td colspan="5" bgcolor="#993399">
<p>some tesa safd asfd asddfdasdf
fasd fasfd as dfas df asdf asdf asdf as dfas df asdf asdf asdf
asdf asd asdfasda</p>
<p>asdasdfasdf</p>
<p>asdf</p>
<p>a</p>
<p>sdf </p>
</td>
</tr>
<tr>
<td>Brenda Hudson</td>
<td>Under Review</td>
<td>Pending</td>
<td>Pending</td>
<td>Cell Below Not Relevant</td>
</tr>
</table>
</body>
</html>
谢谢peter&马丁为您提供意见。如果我遗失了某些东西，你就会告诉我用它敲我头脑。
我试过过elementObject.style.display =''none' ;它没有
纠正这个问题
elementObject.style.display ='''';据我所知，电话是
无效。
如果你有使用它的Firefox，你可以给我一个链接，所以我
可以看到需要做什么。
我很抱歉Table-row与此问题无关。问题是
html元素不会再次崩溃。我知道如何调整显示器
我不知道如何再次折叠元素。
Earl
Thank you peter & martin for your input. If I am missing something you
are telling me bang me over the head with it.
I have tried elementObject.style.display = ''none''; and it did not
rectify the issue
elementObject.style.display = ''''; as far as I know that call is
invalid.
If you have it working with Firefox can you just send me a link so I
can see what needs to be done.
Im sorry Table-row has nothing to do with the issue. The issue is the
html element will not collapse again. I know how to adjust the display
I dont know how to Collapse the element again.
Earl