Question

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

然而，在IE6和其他版本中，它仅适用于“title1”和“title2”TD：它们会改变颜色。什么不起作用是“value1”和“value2”从display：none更改为其默认值。我尝试使用TD的style.display属性无济于事。

非常感谢任何帮助。

<!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>

Answer 1

我想出了一个适用于FF和IE6-8的替代解决方案。对于每个带有class =“value”的TD，我用span标签包含了内容，并对样式表进行了以下更改：

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

现在，如果禁用某行，则应在屏幕外隐藏所有值内容。

IE6 Javascript ClassName更改显示

1 个答案: