sytle=display: で inline block 以外にも色々使い方があることを知った・・・。

html

クリックしたら、テーブルの一行が非表示になって、もう一度クリックしたら、非表示にされた行が表示されるものを作りたかった。


単純だと思ったら、意外とはまったので、メモ。


javascript の問題だと思っていたら、style の問題だった・・・orz

<table>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr id="test" style="display:none">
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

こんなテーブル構造があって、id="test"の部分を表示/非表示に切り替えるだけの簡単な処理。
何の苦労もないと思ったら、苦労があった。


非表示にするまでは問題ない。
これを、表示するために、最初はこうやっていた
※ちなみに無駄に jQuery

$("#test").attr("style","display:block");

これだと、テーブル構造が壊れてしまうのだ・・・orz

$("#test").attr("style","display:inline");

これもダメ。


仕方がないので、改めて style="display" を勉強しなおした。（最初から勉強せぇ）


すると、display には色々なパターンがあることを知った
display−スタイルシートリファレンス

  • none
  • block
  • inline
  • list-item
  • marker
  • compact
  • table
  • inline-table
  • table-caption
  • table-row
  • table-cell
  • table-column
  • table-row-group
  • table-column-group
  • table-header-group
  • table-footer-group


わぁお！

$("#test").attr("style","display:table-row");

ってことで、これで解決した。


勉強になりましたm(_ _)m