- ベストアンサー
階層式メニューをtableタグ内に
- 初めてJSPとJavaScriptを使って階層メニューを作成する方法について教えてください。
- テーブル内に階層メニューを実装したいですが、うまく動作しません。
- 参考になるサイトやアドバイスをいただけると助かります。
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
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"> <!-- var menu = (function(){ var nextLine = function(tr){ var r = tr.nextSibling, len = tr.getElementsByTagName("td").length; while(r && r.nodeName != "TR") r = r.nextSibling; if(r && len>1 && r.getElementsByTagName("td").length == 1) r = null; return r; } var disp = function(e, flag){ if(flag){ e.style.display = ""; } else { while(e){ e.style.display = "none"; e = nextLine(e); } } } var listener = function(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "TD") return; var flag, next = nextLine(t.parentNode); if(next) disp(next, (next.style.display=="none")); } var i, tr = document.getElementsByTagName("tr"); for(i=0; i<tr.length; i++) disp(nextLine(tr[i])); return listener; })(); //--> </script> </body> </html>
その他の回答 (1)
- noris02
- ベストアンサー率74% (56/75)
個人的 主観で申し訳ないですが、 階層メニューをテーブルで作らないほうがいいと思います。 階層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> ゴメンナサイ 力尽きた。。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ありがとうございます。解決しました。 次からはtableを使った階層メニューは作らないようにします＾＾