JavaScriptとCSSについて質問です。


要素の折りたたみを行いたいのですがうまくいきません。
トリガーを
<a href="#" onClick="showHide('test');return false;">test</a>
とし
<div id="test" style="display: none">
open
</div>
とすることで正常に折り畳みが行えているのですが、openの部分を<table>~中略~</table>などとすると、折りたたまれません。
tableの場合になぜ折りたたまれないのか、またどのようにすれば折りたためるのかご教示いただけないでしょうか。

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2012/06/15 14:55:00
  • 終了:2012/06/15 18:20:08

回答(3件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/06/15 15:24:22

ポイント50pt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function showHide(foldingID) {
	if( document.getElementById(foldingID)){
		if( document.getElementById(foldingID).style.display == "none"){
			document.getElementById(foldingID).style.display = "block";
		}
		else{
			document.getElementById(foldingID).style.display = "none";
		}
	}
}
</script>
</head>
<body>
<a href="#" onClick="showHide('test');return false;">test</a>
<div id="test" style="display: none">
<table>
<td>aa</td>
</table>
</div>
<!--
JavaScriptとCSSについて質問です。 要素の折りたたみを行いたい.. - 人力検索はてな http://q.hatena.ne.jp/1339739700
-->
</body>
</html>

このコードでは折りたたまれます。コピペで再現できるコードを提示したほうが早い。(HTML,JSをバラバラに提示されると手間なのです)。どのブラウザかも。
コードを貼る際は

などを活用する。

他2件のコメントを見る
id:quocard

度々申し訳ありません。

追加でいただいたアドレスの内容がまさにその通りでした。
ブロックレベル間での要素の取扱いの違いによるものでした。
こちらtable-rowに関する追加を行い、Firefox・Chrome共に思うとおりの動きと成りました。
ありがとうございます。

2012/06/15 16:44:41
id:Cherenkov

コードを小出しにすると解決が遠回りになる典型的なケースです。
コピペで再現が重要です。

2012/06/15 17:02:36
id:papa-tomo No.2

パパトモ回答回数362ベストアンサー獲得回数1072012/06/15 16:08:33

ポイント33pt

こうしたらどうですか?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
	function showHide(foldingID) {
		if( document.getElementById(foldingID)){
			if( document.getElementById(foldingID).style.display == "none"){
				document.getElementById(foldingID).style.display = "block";
			}
			else{
				document.getElementById(foldingID).style.display = "none";
			}
		}
	}
</script>
</head>
<body>
<a href="#" onClick="showHide('test');return false;">test</a>
<table>
<td>aa</td>
<td>bb</td>
<td id="test" style="display: none">cc</td>
<td>dd</td>
</table>

</body>
</html>

http://q.hatena.ne.jp/

id:papa-tomo

URLはダミーです。

2012/06/15 16:09:02
id:quocard

回答ありがとうございます。
こちらの指摘で一歩近づきました。
tdの場合はこちらで問題なしですが、trの場合はまた挙動が変わってきてしまいます。
しかし、こちらでなんとなくわかったのでもう少しひねればいけると思います。
ありがとうございます。

2012/06/15 16:38:07
id:maya70828 No.3

楽1978回答回数1364ベストアンサー獲得回数1392012/06/15 16:49:01

ポイント33pt

具体的に表の一部を折りたたみ方にもいろいろあるので、回答しようがないのですが、表の一部の折りたたむ例を挙げます。これのどれかであればいいんですが・・・

なんでも折りたたみたい!
http://rgrg.blog61.fc2.com/blog-entry-173.html
テーブルの列を折りたたむ(Safariは折り畳むときにゴミが表示されます)
http://s-cut.net/blog/2005/08/1395/
http://s-cut.net/memo/archives/html/050826_foldtable/foldTable.html
関連質問
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1325442943

何故tableタグが使えないのかについてははっきり書かれていないので何とも言えないのですが、

タグが持つレイヤー機能と 簡単なJavaScriptを組み合わせると実現できるとの解説がありました。
http://html.appelle.jp/2006/03/post_95.html

id:quocard

回答ありがとうございます。

こちら参考になりました。
テーブルの列を折りたたむのはこの先使えそうですのでつかわさせていただこうと思います。

2012/06/15 16:52:50
  • id:Cherenkov
    コピペで再現できるコードを提示すると解決が早いかと
  • id:psne
    何かのライブラリ(prototype.js等)を使わなければ、以下の方法でもよさそうですが、どうでしょう。
    http://chalow.net/2005-01-18-5.html
  • id:quocard
    すいません。
    JavaScriptの部分が抜けてました。
    function showHide(foldingID) {
    if( document.getElementById(foldingID)){
    if( document.getElementById(foldingID).style.display == "none"){
    document.getElementById(foldingID).style.display = "block";
    }
    else{
    document.getElementById(foldingID).style.display = "none";
    }
    }
    }
    になります。
  • id:quocard
    ぽけっとしすてむ 様

    こちらの内容だとtable要素は折りたたまれませんので違うようです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません