IE6 Javascript ClassName更改显示

IE6 Javascript ClassName Change Display

本文关键字：显示 ClassName Javascript IE6      更新时间：2023-09-26

这是我目前在工作中面临的一个问题的简化版本。该代码在Firefox 3.6中正常运行。当单击一行时，Javascript更改其类名，子元素的属性也应该更改。

在IE6和其他版本中，它只适用于"title1"answers"title2"td:它们会改变颜色。不工作的是"value1"answers"value2"从display:none更改为其默认值。我尝试过这种风格。显示TDs的属性无效。

任何帮助都将是非常感激的。

<!doctype html>
<html>
    <head>
        <style type="text/css">
            table#input{
                width: 100%;
                border-collapse: collapse;              
            }
            table#input tr{
                border-bottom: 1px solid #333;
            }
            table#input td{
                padding: 4px;
            }
            tr.disabled td.key{
                color: #ccc;
            }
            tr.disabled td.value{
                display: none;
            }
        </style>
        <script type="text/javascript">
            function toggleVisibility(rowElem){
                rowElem.className = (rowElem.className == 'disabled') ? 'enabled' : 'disabled';
            }
        </script>
    </head>
    <body>
        <table id="input">
            <tr class="disabled" onclick="toggleVisibility(this);"><td class="key">title1</td><td class="value">value1</td></tr>
            <tr class="disabled" onclick="toggleVisibility(this);"><td class="key">title2</td><td class="value">value2</td></tr>
        </table>
    </body>
</html>

我想出了一个在FF和IE6-8中工作的替代解决方案。对于每个class="value"的TD，我用span标记将内容括起来，并对样式表做了以下更改:

tr.disabled td.value span{
    position: absolute;
    top: -20px;
}

现在，当一行被禁用时，所有的值内容都应该隐藏在屏幕之外。

相关文章：