javascript でテーブルの特定行の表示を切り替える処理を書いている時にハマりそうになったのでメモする。

FireFox、Safari、Chromeなどでは、CSS で tr要素 に display:block; を指定すると表示が崩れてしまうが、javascript でも当然同じことが言える。

javascript で要素の表示/非表示を切り替える際は、display プロパティを none から block（またはその逆）にして制御するケースが多いが、tr要素 を操作する場合に同じことをすると、上記理由からテーブルの表示が崩れてしまう。

tr要素 の表示を切り替える場合は、以下例のように table-row を使用するか、display プロパティを空にする。

element.style.display = 'none'; // 非表示

element.style.display = 'table-row'; // 表示1
element.style.display = ''; // 表示2

ただし、IE6,7は table-row に対応していないため、"表示1"の方法を使用する場合は、ブラウザの判別をする必要がある。

上記例は element.style.display を使用する例だが、javascript から CSS にルールを追加する方法で表示を切り替える際も当然同じことが言える。