3

指定された値で列を非表示にするテーブルを開発しようとしています。別のSOの質問で説明されているソリューションを使用しています。そこでの提案の一部として、IE <8ブラウザーをサポートするには、代わりに非表示ルールを使用し、デフォルトで表示する必要があると彼らは言っています。（私のブラウザはクァークズモードです）。

次のような非表示ルールがいくつかあります。

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

したがって、私が期待するのはcellType2、テーブルのが動的に変更されたcellType3ときに非表示にすることです。className初期値では正常に機能しますが、テーブルのclassNameが動的に変更されると、必要なセルは非表示になりますが、他のセルは元に戻りません。

IE Developer Toolを使用して調べたところ、テーブルのclassNameが正しく設定されていることがわかりました。セル要素のスタイルも調べましたが、表示ルールが設定されていないため、デフォルトで表示されると思いますが、表示されません（表示されません）。

開発者ツールで任意のスタイルプロパティを変更すると、セルが表示されているはずであることが認識され、セルが元に戻ることが最も厄介でした。

なぜスタイルが適用されないのですか？この問題の修正を手伝ってください。

編集：問題を再現するための「最小限の」コードを含めています。

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

テーブルを塗り直していないようです。そこにいくつかのIE7＆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 に答える