要素の折りたたみを行いたいのですがうまくいきません。
トリガーを
<a href="#" onClick="showHide('test');return false;">test</a>
とし
<div id="test" style="display: none">
open
</div>
とすることで正常に折り畳みが行えているのですが、openの部分を<table>～中略～</table>などとすると、折りたたまれません。
tableの場合になぜ折りたたまれないのか、またどのようにすれば折りたためるのかご教示いただけないでしょうか。
No.1
1504
493
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をバラバラに提示されると手間なのです)。どのブラウザかも。
コードを貼る際は
などを活用する。
No.2
362107
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>
URLはダミーです。
回答ありがとうございます。
こちらの指摘で一歩近づきました。
tdの場合はこちらで問題なしですが、trの場合はまた挙動が変わってきてしまいます。
しかし、こちらでなんとなくわかったのでもう少しひねればいけると思います。
ありがとうございます。
No.3
1364139
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タグが使えないのかについてははっきり書かれていないので何とも言えないのですが、
回答ありがとうございます。
こちら参考になりました。
テーブルの列を折りたたむのはこの先使えそうですのでつかわさせていただこうと思います。
Cherenkov
2012/06/15 15:08:40
347
347
ぽけっとしすてむ
quocard
1
4
2
度々申し訳ありません。
2012/06/15 16:44:41追加でいただいたアドレスの内容がまさにその通りでした。
ブロックレベル間での要素の取扱いの違いによるものでした。
こちらtable-rowに関する追加を行い、Firefox・Chrome共に思うとおりの動きと成りました。
ありがとうございます。
コードを小出しにすると解決が遠回りになる典型的なケースです。
2012/06/15 17:02:36コピペで再現が重要です。