Question

我正在尝试开发一个在给定值上隐藏其列的表。我正在使用another SO question中讨论的解决方案。作为建议的一部分，他们说，为了支持IE＆lt; 8浏览器，应该使用隐藏规则而默认显示。（我的浏览器处于怪癖模式）。

我有几个隐藏规则，如下所示。

 table.Show1 .cellType2, table.Show1 .cellType3{
       display:none;
  }

因此，当动态更改表的cellType2时，我希望隐藏cellType3和className。使用初始值它可以正常工作，但是当表的className动态更改时，它会隐藏所需的单元格，但不会将其他单元格返回。

我使用IE Developer Tool完成了它，我知道表的className设置正确。我还检查了单元格的样式，没有显示规则集，所以我希望显示为默认值，但不是（它没有显示）。

我发现最令人讨厌的是，如果我在开发者工具中更改 ANY 样式属性，它会意识到它应该显示单元格，然后重新启动它。

为什么不应用样式？请帮我解决这个问题。

编辑：我要包含一个“最小”代码来重现问题。

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>

Answer 1

听起来好像没有重新粉刷桌子。有几个IE 7＆amp; 8重绘并重新排出那些奇怪的东西......

您可以尝试在javascript中强制重绘，也许只需隐藏并显示类似

的表格

document.getElementById('myTable').style.display='none';
document.getElementById('myTable').style.display='table';

或使用类似

的强制在整个页面上强制重排

document.body.className=document.body.className;

Answer 2

尝试重新绘制单元格时似乎存在问题。仅仅从CSS规则不起作用，但如果我们直接在JavaScript中应用显示，则正确绘制单元格。循环使用单元格并直接应用样式，我只需要一个名称约定来轻松识别单元格应该是的类。

    if(isEmpty(cell.className)|| cell.className == (selectedType+"_cell"))
    {    
      cell.style.display = 'table-cell'; // might be different for other IE versions
    }
    else
    {
        cell.style.display = 'none';
    }

IE8不动态应用css显示

2 个答案: