shortcut Webデザインとかガジェットについてつらつらと書き連ねています

テーブルの列を折りたたむ

横スクロールが出るような幅の広いテーブルを使わなければいけない時に使うといいかもしれないDHTML。

サンプルを見る。

WinIE6とfirefox1で確認済み。Safariは折り畳むときにゴミが表示されるので、ちょっと使えないかも。

ソースはこんな感じ。とりあえず表示できていますというレベルなので、全然エレガントでもスマートでもありません。もっと素敵な処理方法を知っている人がいたら教えてください。

javaScript

/*
テーブルのセルの表示／非表示を切り替える
*/
function hideCell(className,idName) {
obj=document.getElementById(idName);
if(obj.className == "on"){
obj.className = "off";
changeDisplay(className,'none',idName,"+");
}else {
obj.className = "on";
changeDisplay(className,'',idName,"-");
}
}
/*
テーブルのセルの表示／非表示を切り替える(表示部分)
*/
function changeDisplay(className,visible,idName,idText) {
document.getElementById(idName).innerHTML = idText; // 切り替えボタンの表示を切り替え
var spans = document.getElementsByTagName('span');
var length = spans.length;
for (var i = 0; i < length; i++) {
var e = spans[i];
if (e.className == className) {
e.style.display = visible;
}
}
}

スタイルシートのdisplayを操作して、該当するクラス名のspanタグの表示／非表示を切り替えているだけです。
クラス名の付けられたエレメントを直接操作する方法が分からなかったので、HTML内で使用しているspanタグを全て配列に入れた後、総当たりでクラス名を判定するという非効率な方法を使っています。そのため、テーブルの行や列が増えてくるとレスポンスが目に見えて落ちてきます。

テーブルのデータ部分

<tr>
<td><span class="cell01">1</span></td>
<td><span class="cell02">..................</span></td>
<td><span class="cell03">..................</span></td>
<td><span class="cell04">..................</span></td>
<td><span class="cell05">..................</span></td>
</tr>

列ごとに異なるクラス名を付けることで、javaScript側で列を判別できるようにしています。
始めはtdタグとthタグに直接クラス名を指定していましたが、そうすると折りたたみボタンも一緒に消えてしまうので、spanタグを間に挟みました。

テーブルのヘッダー部分

<th><a href="javascript:hideCell('cell01','s01')" id="s01" class="on" title="a">-</a><span class="cell01">a</span></th>

折りたたみボタンのクラスをフラグ代わりに使っています。クラス名が「on」の時は表示、「off」の時は非表示となります。
aタグのtitle属性はなくても動作に支障ありませんが、付けておくとIEではマウスオーバーでツールチップが表示されるので、折り畳んだときでも項目名を知る事ができます。

クッキーを組み合わせると折りたたんだ状態を保持できます。後日追加する予定なので乞うご期待。

追記: (05/09/06)
クッキーの処理を追加した。といっても、書籍の関数をそのまま使ったので説明は後で。