人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: quocard
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Cherenkov
●50ポイント
<!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をバラバラに提示されると手間なのです)。どのブラウザかも。
コードを貼る際は

などを活用する。


quocardさんのコメント
度々の回答ありがとうございます。 Gistを始めて利用するのでこれであっているのか自信ありませんが。 https://gist.github.com/2935060 実際に隠す部分はテーブル内の一部分となります。 大量にある場合は折りたたんでコンパクトにしておきたいと思っております。 テーブル全体だと確かに折りたたまれるんですが、一部分だけを指定すると隠れませんでした。 確認したブラウザはFirefoxとChromeとなります。

Cherenkovさんのコメント
-[http://d.hatena.ne.jp/terhy/20080111:title=Firefoxで、tableの中身(tr,td,th)に対して、”display:none”と”di - 五蘊皆空@terhy] -[http://www.h-fj.com/blog/archives/2007/05/06-134912.php:title=tr要素の「display : block;」にはまる - The blog of H.Fujimoto] このへんも

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

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

2 ● パパトモ
●33ポイント

こうしたらどうですか?

<!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/


パパトモさんのコメント
URLはダミーです。

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

3 ● 楽1978
●33ポイント

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

なんでも折りたたみたい!
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


quocardさんのコメント
回答ありがとうございます。 こちら参考になりました。 テーブルの列を折りたたむのはこの先使えそうですのでつかわさせていただこうと思います。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ