階層式メニューをtableタグ内に

解決済

質問者：echo_s
質問日時：2011/02/24 20:54
回答数：2件

初めてJSPとJavaScriptをいじります。
階層メニューを作りたいのですが、
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>見出し１</td>
<td>見出し２</td>
<td>見出し３</td>
</tr>
<%
for(int i = 0; i < 5; i++){
%>
<tr>
<td colspan="3">▼階層１</td>
</tr>
<tr>
<td colspan="3">▽階層２</td>
</tr>
<tr>
<td>項目１</td>
<td>項目２</td>
<td>項目３</td>
</tr>
<%
}
%>
</table>
このようなテーブルを作成して、
▼階層１をクリックしたら▽階層２以下が表示・非表示されるように、
▽階層２をクリックしたら項目１～項目３が表示・非表示されるようにしたいのです。
http://phpjavascriptroom.com/?t=js&p=tips_node
のサイトを参考にしてみましたが、 <div id="open_1" class="child" style="display:none;">をどの位置に入れても階層メニューがうまく動きません。
アイコンは変わるけど下の階層が開閉しなかったり、全く動かなくなったりします。
どうしたらうまく動くようになるのでしょうか？参考になるサイト等ありましたら教えて下さい。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2011/02/25 13:27

No1様の回答にまったく賛成です。

リスト形式などによるマークアップは、ツリーメニューと構造が一致しているのでそのまま構造が現れています。
一方、ご提示のような記法では、どこが階層の上位/下位なのかわかりません。
質問者さまはご存知でしょうし、「階層1」というところが1階層なのでしょうけれど、実装したときに「階層1」と書いてあるわけではありませんよね？

判別するためには、いらぬidをつけてみたり特殊なルールを作成して判別することになるでしょう。
これを適用するには専用のコードが必要になります。また、ルールに例外ができたり変更される毎にコードは作り直しとなります。
（一行あけて、三行ごとに第一階層になるのかも知れませんが、中に2階層で終わるツリーが出たとたんに全滅だったりします）

これは一般的なルールとは言い難いので、残念ながらそのようなルールに即した参考サイトもないことでしょう。

などといっているだけでは回答にならないので、特殊ルール専用のコードのサンプルを・・・
（ルールを変えれば、当然動作しません）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" onclick="menu(event);">
<tr>
<td>見出し１</td>
<td>見出し２</td>
<td>見出し３</td>
</tr>

<tr>
<td colspan="3">▼階層１A</td>
</tr>
<tr>
<td colspan="3">▽階層２A</td>
</tr>
<tr>
<td>項目１A</td><td>項目２A</td><td>項目３A</td>
</tr>

<tr>
<td colspan="3">▼階層１B</td>
</tr>
<tr>
<td colspan="3">▽階層２B</td>
</tr>
<tr>
<td>項目１B</td><td>項目２B</td><td>項目３B</td>
</tr>

<tr>
<td colspan="3">▼階層１C</td>
</tr>
<tr>
<td colspan="3">▽階層２C</td>
</tr>
<tr>
<td>項目１C</td><td>項目２C</td><td>項目３C</td>
</tr>
</table>

<script type="text/javascript">

</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。解決しました。
次からはtableを使った階層メニューは作らないようにします＾＾

通報する

お礼日時：2011/02/28 14:07

No.1

回答者： noris02
回答日時：2011/02/24 22:51

個人的主観で申し訳ないですが、

階層メニューをテーブルで作らないほうがいいと思います。

階層1をひらいたらその中に階層2 その中に階層3 ということでしたら、
色々やり方あると思いますが、わたしは　ul li を使います。(dl/dd/dt派と ul/li派に分かれるようです。)
参照されたページもそうなっていたと思います。

まずは参照ページをコピペしてみてください。
<li><a href="#">・ctgA-2-1</a></li> の・ctgA-2-1部分を変えるとメニュー内容は変わります。
<ul>
<li>階層1
<ul>
<li>階層2
<ul>
<li>階層3
<ul>
<li>階層4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
何ぼでも付け足せます。(こんがらがるとおもうけど。)
もちろんそれぞれの　ul liタグに idを。

下記は ↑とやってることは　一緒ですが、ソースが汚ないです。

【table で階層メニューの思いつき】
<table>
<tr><td>
<div onclick="2を表示さす">階層1</div>
<table id="2">
<tr><td>
<div onclick="3を表示さす">階層2</div>
<table id="3">
<tr><td>階層3
</td></tr></table>
</td></tr></table>
</td></tr></table>

ゴメンナサイ力尽きた。。