┌───┬───┐
│1行目 │ │
├───┤ │
│2行目 │ボタン │
├───┤ │
│3行目 │ │
└───┴───┘
というテーブルで、ボタンを押すごとに2行目が表示、非表示と切り替わるように、下のようなソースを書きました。
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ベストアンサー
- 回答日時:
IE (少なくとも IE8-) の innerHTML は "table, tFoot, tHead, and tr elements" の書き換えに対応していません。
これらの要素を書き換える際には innerHTML 以外の手段を用いてください。
http://msdn.microsoft.com/en-us/library/ms533897 …
この仕様(不具合?)が IE9 で解消されたかどうかはわかりませんが、少なくとも IE8 では未修正です。
ありがとうございます。
そうだったんですか。IEでは対応していないんですね。少なくとも8以前では。
そうと分かれば別の方法でやりたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
jqueryで表に連番No.を追加したい
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
プルダウンで選択すると、DBの...
-
JavaScriptで特定のtdタグにcla...
-
チェックボックスにチェックが...
-
「オブジェクトは、このプロパ...
-
テーブルで複数行をまとめて非...
-
ドラッグ&ドロップしたらその...
-
特定<table>内の<td>の色を変える
-
テーブル内に表示されている数...
-
jqueryでどうやってエスケープ?
-
IEにおけるinnerHTMLの記述ミス?
-
return trueとreturn falseの用...
-
<JavaScript>tableタグを入力不...
-
【jQuery】input nameの文字列...
-
onchangeイベントを強制的に発...
-
javascriptでASPにデータを渡す
-
プルダウン選択を変更すると、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
マウスをブラウザの外に出した...
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
特定の文字列を挿入
-
テーブル内に表示されている数...
-
javascript クリックすると、あ...
-
テーブルの項目の値取得
-
javascriptで質問です。 displa...
-
Tablesorteを2行一組でソートする
-
\\u30ad\\u30fc\\u30dc・・・と...
おすすめ情報