WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:テーブルの列を表示/非表示切替える方法

0:[投稿] カッパ [2004/01/30 10:38 ][環境:IE5以降 Linux,Apache,php]

テーブルの列を表示したり消したり出来るボタンを作成したのですが、colspan等で纏めると消えません。また、colgroupの属性も変わりません。何方か教えていただけませんか?よろしくお願いします。

<html>
<script type="text/javascript">
<!--
function disp( id ) {
if( !document.getElementsByTagName ) return false;
for( $i=0 ; $i < 4 ; $i++ ){
   var obj = document.getElementById( id + $i );
   if( $i == 0 ){
    obj.colspan=2;
   } else {
       if (obj.style.display == "") { obj.style.display = "none";     }
       else{ obj.style.display = ""; }
   }
}
return false;
}
// -->
</script>
<form name='AA'>
<table border='1'><colgroup span='3' width='50' bgcolor='blue'><colgroup span='3' width='60' bgcolor='red'>
    <tr><td id="td20" colspan='3'>A1-A3</td><td colspan='3'>B1-B3</td></tr>
    <tr><td>A1</td><td id="td21">A2</td><td>A3</td><td>B1</td><td>B2</td><td>B3</td><tr>
    <tr><td>A1</td><td id="td22">A2</td><td>A3</td><td>B1</td><td>B2</td><td>B3</td><tr>
    <tr><td>A1</td><td id="td23">A2</td><td>A3</td><td>B1</td><td>B2</td><td>B3</td><tr>
</table>
2列目の表示/非表示 <button onclick="disp('td2')">OK</button><br>
</form></html>


1:[回答] gun [2004/01/30 13:36 ]

obj.colSpan ですね。
また、再表示の際にはobj.colSpanの値を戻さねばなりません。
ただ、colgroupの青/赤の境界が希望通りの動きになりません。
IEに連結したセルのカウントがうまくいかない仕様(バグ?)
があるかもしれません。


2:[完了] カッパ [2004/01/30 14:25 ]

素晴らしい。
gun様、ありがとうございます。
S−sだったのね。;_;
グループが仕様(バグ)ならば仕方が無いです。
本当にありがとうございました。


3:[完了] [2004/01/30 14:36 ]

そういうのは、colspan要素の中にcol要素を入れておいて
希望の列に該当するcol要素のdisplayを変更する方が簡単だと思います。

# CSS2的には、本当は visibility を collapse に変更します。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World