DHTMLでテーブルの行の表示・非表示を切り替える。

質問

こんにちは。

WEBアプリケーションのモックアップを作成しています。
自身はJava屋ですが、DHTMLに明るくないため、苦戦しています。

同一画面内のリンクがクリックされた場合に・・・
テーブルの行の表示、非表示を切り替えたいのです。

<!-- ========================= -->
<!-- テーブル１ -->
<table border="1">
<tr>
<td>ヘッダ１</td>
<td>ヘッダ２</td>
</tr>

<!-- ☆☆☆ ここから ☆☆☆ -->
<tr>
<td>111</td>
<td>aaa</td>
</tr>
<tr>
<td>222</td>
<td>bbb</td>
</tr>
<!-- ☆☆☆ ここまで消したい ☆☆☆ -->
</table>

<!-- テーブル２ -->
<table border="1">
<tr>
<td>ヘッダA</td>
<td>ヘッダB</td>
</tr>
<tr>
<td>あああ</td>
<td>いいい</td>
</tr>
</table>
<!-- ========================= -->

<tr>タグを<div>タグで囲んで、styleでhidden、visibleを切り替えようと考えましたが、<tr>に<div>タグが使えない事を知りました。

そこで、テーブル１を大きくテーブルで囲み、ヘッダとボディ部をセルに入れて、セルの表示・非表示を切り替えました。
これは上手くいったのですが、非表示にした場合、テーブル２との間は詰まるようにしたいのですが、もともと表示されていた分のスペースが出来てしまいました。

あまり、ロジックを組み込まずに作ろうと考えているのですが、上手い方法が思いつきません。
何か良い方法がありましたら、ご教授願います。

ターゲットのブラウザは…
IE5.5～IE7
です。

回答No.1

noname#26224 · ベストアンサー

<!-- ☆☆☆ ここから ☆☆☆ -->
<tr id=a1>
<td>111</td>
<td>aaa</td>
</tr>
<tr id=a2>
<td>222</td>
<td>bbb</td>
</tr>
<!-- ☆☆☆ ここまで消したい ☆☆☆ -->

消す時は
document.getElementById('a1').styla.display = 'none';
document.getElementById('a2').styla.display = 'none';
ってな感じ。

お礼

trの属性で制御できたんですね。

レコードが多かった場合はScript側でループするような処理で対応できそうなので、大変、参考になりました。

回答No.2

fire--

innerHTMLで書換えをしてはどうでしょう。

http://www.tohoho-web.com/js/element.htm

お礼

ありがとうございます。
innnerHTMLで全部のテーブルを書き換えることも考えたのですが、HTMLソースの可読性が悪くなるかと思い、少し躊躇していました。

しかし、実際に書いてみると、思ったよりも読みづらくは無いので、参考にさせて頂きたいと思います。