ブラウザ判別

質問

テーブル行をスイッチによって表示非表示を切り替える機能を実装してるんですが
IEではtable-rowを入れてもエラーを出し
NNやFirefoxではblockを入れるとレイアウトが崩れてしまい
IEの場合block、NNやFirefoxではtable-rowを判別していれるようにしたんですが
切り替えているとなぜかたまにblockが入ってしまうことがあります

//ブラウザ判別
if (document.all) {
var display = 'block';
} else if (document.getElementById) {
var display = 'table-row'
}

if(switch_1 == "on"){
document.getElementById('row1').style.display = display;
document.getElementById('row2').style.display = 'none';
document.getElementById('row3').style.display = display;
}
if(switch_1 == "off"){
document.getElementById('row1').style.display = 'none';
document.getElementById('row2').style.display = display;
document.getElementById('row3').style.display = 'none';
}

何かおかしいのでしょうか
もしくは代替方法があればご教示お願いします

回答No.1

yambejp · ベストアンサー

あえてブラウザ判別などせずに

・・・.style.display = '';

っていうわけにはいきませんか？

お礼

それでやってみたら誤動作も無くなり想定している動作が出来ました
空を入れると初期設定に戻るんですかね？
ありがとうございました

回答No.4

yambejp

＞空を入れると初期設定に戻るんですかね？

微妙・・・、実際にはブラウザの解釈によります。
そこで、タグのスタイルをいじるのではなく、クラスで調整する
方がよいですね。
（複数のクラスを設定する場合はもう少し工夫が必要ですが）

<script>
var switch_1="off";
window.onload=function(){
change();
}
function change(){
switch_1=switch_1=="on"?"off":"on";
if(switch_1 == "on"){
document.getElementById('row1').className = "";
document.getElementById('row2').className = "hide";
document.getElementById('row3').className = "";
}else if(switch_1 == "off"){
document.getElementById('row1').className = "hide";
document.getElementById('row2').className = "";
document.getElementById('row3').className = "hide";
}
}
</script>
<style>
.hide{
display:none;
}
</style>
<input type="button" value="change" onClick="change()">
<table>
<tbody>
<tr id="row1">
<td>1</td>
<td>2</td>
</tr>
<tr id="row2">
<td>3</td>
<td>4</td>
</tr>
<tr id="row3">
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>

回答No.3

askaaska

いや、
私の指摘は
文法がおかしいから直せってことよ。
問題の解決方法じゃないわ。

ブラウザの判定がおかしいかどうかは
デバッグしてみればいいんじゃない？

私には提示されているコードに
文法以外の問題があるようには見えないの。

て、今更だけど、結構すごいことに気づいたわ。
var display = 'block'
この変数displayだけど
名前変えなさい。
案外これで直るかもよ。

回答No.2

askaaska

if (document.all) {
var display = 'block';
} else if (document.getElementById) {
var display = 'table-row'
}
は
var display;
if (document.all) {
display = 'block';
} else if (document.getElementById) {
display = 'table-row'
}
こう書かないとダメよ。

この点以外は特におかしなところは見当たらないわ。
原因があるとしたらもっと別のところじゃないかしら。

補足

回答どおりに書き換えても誤作動はなくなりませんでした
↑の回答者さんのとおりにすると誤作動しないということは
ブラウザ判別部分に何かおかしいことがあるんでしょうか・・