我正在尝试开发一个在给定值上隐藏其列的表。我正在使用中讨论的解决方案另一个问题 https://stackoverflow.com/questions/2858339/show-hide-html-table-columns-using-css。作为建议的一部分，他们说为了支持 IE
我有几个如下所示的隐藏规则。
table.Show1 .cellType2, table.Show1 .cellType3{
display:none;
}
所以我期望的是cellType2 and cellType3隐藏时className表的内容是动态改变的。使用初始值，它可以正常工作，但是当表的 className 动态更改时，它会隐藏所需的单元格，但不会将其他单元格恢复。
我用 IE Developer Tool 浏览了一下，我知道表的 className 设置正确。我还检查了单元格元素的样式，并且没有设置显示规则，因此我希望显示为默认值，但事实并非如此（它没有显示）。
我发现最烦人的是如果我改变ANY开发人员工具中的 style 属性，它会意识到应该显示该单元格，然后将其恢复。
为什么没有应用该样式？请帮我解决这个问题。
编辑：
我添加了一个“最小”代码来重现该问题。
JavaScript：
function typeChanged(name, id)
{
var elem = document.getElementById(id);
elem.className = name;
}
CSS:
table td
{
border-top: 1px none #000066;
border-right: 1px none #000066;
border-bottom: 1px solid #000066;
border-left: 1px solid #000066;
}
table.Show1 .cellType2, table.Show2 .cellType1{
display:none;
}
table.Show1 td,table.Show2 td
{
border-style: solid solid solid solid;
border-width: 1px;
}
table.Show1 th,table.Show2 th,table.Show1,table.Show2
{
background: transparent none repeat scroll 0% 0%;
color: #000066;
border-style: none none none none;
table-layout: fixed;
}
HTML:
<select onChange="typeChanged(this.options[this.selectedIndex].value,'mytable')">
<option value="Show1">Show1</option>
<option value="Show2">Show2</option>
</select>
<table id="mytable" class="Show1">
<tr>
<th class="cellType1">type1</th>
<th class="cellType2">type2-a</th>
<th class="cellType2">type2-b</th>
</tr>
<tr>
<td class="cellType1"><input type="text"></input></td>
<td class="cellType2"><input type="text"></input></td>
<td class="cellType2"><input type="text"></input></td>
</tr>
</table>
