IEにおけるinnerHTMLの記述ミス？

質問

┌───┬───┐
│１行目 │　　 　　│
├───┤　　　　 │
│２行目 │ボタン │
├───┤　　　 　│
│３行目 │　　　 　│
└───┴───┘

というテーブルで、ボタンを押すごとに２行目が表示、非表示と切り替わるように、下のようなソースを書きました。
IE以外ではうまく行くのですが、IEだと
一回目の押下ではうまく行くのですが、その後が動きません。

ちなみに
最初の押下でエラーの警告がでています。
innerHTMLの記述を消したらそれは無くなりました、、、。

IE以外のブラウザでは上手く行くのですが、
IEではどこがダメなのでしょうか。

基本的なことで申し訳ありませんが、よろしくお願いします。

--------------------------------------------------------------
<script type="text/javascript">
function del() {
document.getElementById('row2').style.display="none";
document.getElementById('row1').innerHTML=
'<td>1行目</td>'+
'<td rowspan="2"><input type="button" value="2行目を表示" onclick="add()" /></td>'
}
function add() {
userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
document.getElementById('row2').style.display="display";
}
else {
document.getElementById('row2').style.display="table-row";
}
document.getElementById('row1').innerHTML=
'<td>1行目</td>'+
'<td rowspan="3"><input type="button" value="2行目を非表示" onclick="del()" /></td>'
}
</script>

<style type="text/css">
table {
border-collapse:collapse;
}
td {
border:1px solid #ccc;
}
</style>

<table>
<tr id="row1">
<td>1行目</td>
<td rowspan="3"><input type="button" value="2行目を非表示" onclick="del()" /></td>
</tr>
<tr id="row2">
<td>2行目</td>
</tr>
<tr>
<td>3行目</td>
</tr>
</table>

回答No.1

think49 · ベストアンサー

IE (少なくとも IE8-) の innerHTML は "table, tFoot, tHead, and tr elements" の書き換えに対応していません。
これらの要素を書き換える際には innerHTML 以外の手段を用いてください。
http://msdn.microsoft.com/en-us/library/ms533897%28v=VS.85%29.aspx

この仕様(不具合？)が IE9 で解消されたかどうかはわかりませんが、少なくとも IE8 では未修正です。

お礼

ありがとうございます。

そうだったんですか。IEでは対応していないんですね。少なくとも８以前では。
そうと分かれば別の方法でやりたいと思います。

回答No.2

askaaska

IEでは、TABLE、TR、TDなんかのinnerHTMLは読み取り専用なのです。
今回の場合は、ボタンを2種類用意して
都度表示・非表示すればよいかと。

お礼

ありがとうございます。

あらま、IEではだめだったんですか。
別の方法でやるしかないですね。

補足

先にお答えくださった方をベストアンサーにしましたが、どちらも参考になりました！
ありがとうございます。