HRブレークのクラスを設定するTD colspan

データを表示するためのネストしたテーブル配列があります。ネストされたテーブルをすべての親テーブルの列にまたがるTDに配置したいだから私はcolspanを設定しました。しかし、私はまた、ユーザーが親をクリックして子データを隠す/再表示することができるようにしたい。これはIE8ではうまくいきますが、FireFoxとChromeではネストされたテーブルはcolspanを無視していて、最初の列にのみ播種されます。HRブレークのクラスを設定するTD colspan

次のコードは問題の例です。最初の列のテキストをクリックすると、私の意味がわかります。データの最終行はクラスに分類されないため、ページの読み込みには問題はありませんが、クラスが設定されると再び間違っていきます。

どのような考えですか？

ありがとうございました。

<!DOCTYPE html PUBLIC "-//W3C//thD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/thD/xhtml1-transitional.thd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
<script type="text/javascript"> 
function expandRow(rowID, clickRow) 
{ 
    var item = document.getElementById(rowID); 
    if(item.className=='hidden'){ 
     item.className = 'unhidden'; 
    }else{ 
     item.className = 'hidden'; 
    } 
} 
</script> 
<style type="text/css"> 
.hidden { display: none; } 
.unhidden { display: block; } 
</style> 
<title>Table Test</title> 
</head> 
<body> 
<table> 
    <thead> 
    <tr> 
     <th>Col1</th> 
     <th>Col2</th> 
     <th>Col3</th> 
     <th>Col4</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="collapsed" onclick="expandRow('id30', this);">Click Here to Expand</td> 
     <td>data1</td> 
     <td>data2</td> 
     <td>data3</td> 
    </tr> 
    <tr class="hidden" id="id30"> 
     <td colspan="4"> 
     <table> 
      <tbody> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td class="collapsed" onclick="expandRow('id95', this);">Click Here to Expand</td> 
     <td>data1</td> 
     <td>data2</td> 
     <td>data3</td> 
    </tr> 
    <tr class="hidden" id="id95"> 
     <td colspan="4"> 
     <table> 
      <tbody> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td class="collapsed" onclick="expandRow('id96', this);">Click Here to Expand</td> 
     <td>This one</td> 
     <td>displays ok</td> 
     <td>until you set the class!</td> 
    </tr> 
    <tr id="id96"> 
     <td colspan="4"> 
     <table> 
      <tbody> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

出典

2009-09-01 javadeveloper

完全にあなたの再表示クラスを取り除く - それは完全に冗長です。だけではなく、この場合には、自然な状態だ、それはそれに戻ることができるようにする要素から隠されたクラスを削除します。

item.className = '';

しかし、通常、私は交換をお勧めします：

item.className = item.className.replace(/\bhidden\b/gi,'');

（とFWIWを、個人的には、私は可視性プロパティを扱うために予約する "隠された"よりも意味的に正確に "削除"されています。

出典

2009-09-01 16:12:54 annakata

ありがとう。解決策は非常にぼんやりとしているので、投稿する前に私がそれを考えなかったのは非常に恥ずかしいかもしれません。隠された上の削除の使用についてのあなたのコメントも意味があるので、私はそれを同時にソートするでしょう。 – javadeveloper

に変更し再表示に関するCSSの行を：.unhidden { display: table-row; }

ブロックはTRSのために無効なスタイルです。

出典

2009-09-01 16:07:57

.unhiddenクラスは特定の要素タイプに対してのみ有効になり、古いブラウザでは値が認識されません。ジェネリッククラスを一般的に便利に保つ方が良い。 – annakata

のみCSSのこの部分を変更

<style type="text/css"> 
.hidden { display: none; } 
.unhidden { display:; } 
</style>

出典

2009-09-01 16:10:05

これは構文解析しない* so *であるため、ルールが全くないという効果が得られません。 – annakata

どうしてスタイリングを完全に削除しないのですか？

<style type="text/css"> 
.hidden { display: none; } 
.unhidden { } 
</style>

出典

2009-09-01 16:24:04 Keith

私はちょうど

.vis { 
    display: block; 
    display: table-row; 
}

旧インターネットエクスプローラーがtable-rowを無視を宣言することによって、この情報を使用して、それを解決しました。 FirefoxとInternet Explorer 8はそれを使用します。

出典

2010-09-27 19:05:27 user459835

HRブレークのクラスを設定するTD colspan

答えて

関連する問題