![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_04.png?5a7ff87)
初めてJSPとJavaScriptをいじります。
階層メニューを作りたいのですが、
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>見出し1</td>
<td>見出し2</td>
<td>見出し3</td>
</tr>
<%
for(int i = 0; i < 5; i++){
%>
<tr>
<td colspan="3">▼階層1</td>
</tr>
<tr>
<td colspan="3">▽階層2</td>
</tr>
<tr>
<td>項目1</td>
<td>項目2</td>
<td>項目3</td>
</tr>
<%
}
%>
</table>
このようなテーブルを作成して、
▼階層1をクリックしたら▽階層2以下が表示・非表示されるように、
▽階層2をクリックしたら項目1~項目3が表示・非表示されるようにしたいのです。
http://phpjavascriptroom.com/?t=js&p=tips_node
のサイトを参考にしてみましたが、 <div id="open_1" class="child" style="display:none;">をどの位置に入れても階層メニューがうまく動きません。
アイコンは変わるけど下の階層が開閉しなかったり、全く動かなくなったりします。
どうしたらうまく動くようになるのでしょうか?参考になるサイト等ありましたら教えて下さい。
No.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>見出し1</td>
<td>見出し2</td>
<td>見出し3</td>
</tr>
<tr>
<td colspan="3">▼階層1A</td>
</tr>
<tr>
<td colspan="3">▽階層2A</td>
</tr>
<tr>
<td>項目1A</td><td>項目2A</td><td>項目3A</td>
</tr>
<tr>
<td colspan="3">▼階層1B</td>
</tr>
<tr>
<td colspan="3">▽階層2B</td>
</tr>
<tr>
<td>項目1B</td><td>項目2B</td><td>項目3B</td>
</tr>
<tr>
<td colspan="3">▼階層1C</td>
</tr>
<tr>
<td colspan="3">▽階層2C</td>
</tr>
<tr>
<td>項目1C</td><td>項目2C</td><td>項目3C</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>
No.1
- 回答日時:
個人的 主観で申し訳ないですが、
階層メニューをテーブルで作らないほうがいいと思います。
階層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>
ゴメンナサイ 力尽きた。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- Perl PERL 1 2022/04/26 14:15
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
onMouseOverで複数(?)のセル...
-
【UWSC】HTML内のある部分を抽...
-
Selenium.ChromeDriverの使い方...
-
テーブル内に表示されている数...
-
JavaScriptによる表のソート機...
-
テーブル列の表示・非表示機能...
-
データベース呼び出しに使用す...
-
標準準拠モードと後方互換モー...
-
【秀丸マクロ】検索行と、その...
-
プルダウンで選択した値によっ...
-
特定の文字列を挿入
-
至急!GetElementById でtdの...
-
setTimeoutで引数を配列にできるか
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
TextBoxに半角数字以外を入れた...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
ハイパーリンクを別ウインドウ...
-
JavaScriptで特定のtdタグにcla...
-
JavaScriptでテーブルをクリッ...
-
【UWSC】HTML内のある部分を抽...
-
至急!GetElementById でtdの...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
動的なtableの値を取得したい
-
Selenium.ChromeDriverの使い方...
-
二次元配列に数字をランダムに...
-
Excelで作ったhtmlファイルのサ...
-
スクロールバーの表示位置を変...
-
テーブルの変数について
-
マウスをブラウザの外に出した...
-
テーブル行のクリックでチェッ...
-
jquery datatablesを使用 イン...
おすすめ情報