IE8 doesn't apply css display dynamically

I'm trying to develop a table that hides its columns upon a given value. I am using a solution discussed in another SO question. As part of the suggestion there they say that to support IE<8 browsers a hide rule should be used instead and show by default. (My browser is in quirks mode).

I have several hide rules that look like the following.

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

So what I expect is cellType2 and cellType3 to hide when the className of the table is changed dynamically. With the initial values it works fine but when the className of the table changes dynamically, it hides the cells needed but it doesn't bring the other back.

I went through it with IE Developer Tool and I know that the className of the table is set properly. I also inspected the cell element's style and there is no display rule set so I would expect to display as default, but it isn't(it doesn't show up).

What I found most annoying it that if I change ANY style property in the Developer Tool, it will realize that it should be displaying the cell and then , it brings it back up.

Why the style is not applied? Please help me fix this issue.

EDIT: I'm including a "minimal" code to recreate the issue.

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>

回答1:

It sounds like it's not repainting the table. There are several IE 7 & 8 repaint and reflow oddies out there...

You can try forcing the repaint in your javascript, maybe just by hiding and showing the table with something like

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

or forcing a reflow on the entire page with something like

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

回答2:

It appears that there is a problem when trying to repaint the cells. Just from the CSS rule doesn't work but if we apply the display directly in the JavaScript then the cells are drawn properly. Looping trough the cells and applying the style directly works, I just had to have a name convention to easily identify the class that a cell is supposed to be.

    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';
    }