3

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

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

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

所以我期望的是在动态更改表cellType2时cellType3隐藏。className使用初始值它可以正常工作，但是当表的类名动态更改时，它会隐藏所需的单元格，但不会将另一个单元格带回来。

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

我发现最烦人的是，如果我在 Developer Tool 中更改任何样式属性，它会意识到它应该显示单元格，然后将其恢复。

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

编辑：我包含一个“最小”代码来重新创建问题。

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

2 回答 2

2

听起来它没有重新粉刷桌子。那里有几个 IE 7 和 8 重绘和回流怪...

您可以尝试在您的 javascript 中强制重绘，也许只是通过隐藏和显示表格，例如

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

或使用类似的东西强制在整个页面上进行重排

document.body.className=document.body.className;
于 2013-03-20T00:57:50.793 回答
1

尝试重新绘制单元格时似乎存在问题。仅从 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';
    }
于 2013-03-25T12:01:14.643 回答