ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript:非表示にしたtrタグを表示する際に気をつける点

スポンサーリンク

ラジオボタンやセレクトボックスの選択によって、表示/非表示を切り替えたいと要望されることがあります。

 

非表示にするは、

document.getElementById('tag').style.display = "none"

を設定すればできます。

逆に、表示するには、

document.getElementById('tag').style.display = "block";

を設定すればできます。

 

この方法でも大丈夫なときは多いのですが、trタグに対して非表示にしてから表示すると、Google Chromeでは表示が崩れてしまいます。

ブラウザ特有の現象で仕方ないのかと思っていましたが、表示属性にはblockの他にinlineもあったことを思い出し、blockを指定しているからだと気づきました。

 

対処方法

どうすればいいのかと調べたら、

document.getElementById('tag').style.display = "";

とすると、指定が消されるということがわかり、元々の値に戻るようだということがわかりました。

早速Google Chromeで試したら、trタグでも元通りに表示され、表示の崩れは起こらなくなりました。

 

追加で気づいたこと

以下のサイトを見たら、displayプロパティには、いろいろ属性がありました。

trタグには、table-rowを指定するべきかもしれません。

display-スタイルシートリファレンス