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を指定するべきかもしれません。
